{"id":1166,"date":"2011-02-21T09:50:15","date_gmt":"2011-02-21T08:50:15","guid":{"rendered":"https:\/\/blogs.ua.es\/observatoriotic\/?p=1166"},"modified":"2011-09-12T17:34:12","modified_gmt":"2011-09-12T15:34:12","slug":"crea-tus-propios-estilos-en-wimba-create","status":"publish","type":"post","link":"https:\/\/blogs.ua.es\/observatoriotic\/2011\/02\/21\/crea-tus-propios-estilos-en-wimba-create\/","title":{"rendered":"Crea tus propios estilos en Wimba Create"},"content":{"rendered":"

Si las etiquetas para el formato de contenido<\/a> que vienen por defecto en Wimba Create se te quedan cortas, o simplemente necesitas aplicar un formato determinado a un p\u00e1rrafo en concreto puedes crear un nuevo estilo de una manera relativamente sencilla. Tendremos que modificar la hoja de estilo<\/strong> del esquema que estemos utilizando y posteriormente, usar el estilo de Wimba cgHTMLInclude<\/strong>.<\/p>\n

\n

Si les etiquetes per al format de contingut<\/a> que v\u00e9nen per defecte en Wimba Create se’t queden curtes, o simplement necessites aplicar un format determinat a un par\u00e0graf en concret pots crear un nou estil d’una manera relativament senzilla. Haurem de modificar la fulla d’estil<\/strong> de l’esquema que estiguem utilitzant i posteriorment, usar l’estil de Wimba cgHTMLInclude<\/strong>.<\/p>\n

<\/p>\n

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

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

El directorio por defecto donde se encuentran los esquemas de dise\u00f1o en espa\u00f1ol es:
\nC:\\Archivos de programa\\WimbaCreate\\resources\\es.lproj\\schemes\\<\/strong><\/p>\n

Al abrir la carpeta de cualquier esquema podremos ver la estructura mostrada en la siguiente imagen:<\/p>\n

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

El archivo que debemos editar, “cg.css”<\/strong>, es la hoja de estilo que reconoceremos por la extensi\u00f3n CSS. Podemos abrirlo con un editor HTML o incluso, con el bloc de notas. Si queremos a\u00f1adir cualquier imagen en nuestro estilo, es conveniente guardarla en la carpeta “<\/em>buttons<\/strong>“<\/em>, para hacer referencias relativas al archivo.<\/p>\n

Para aplicar un formato diferente a un p\u00e1rrafo de un documento HTML se utiliza, por lo general, la etiqueta DIV. As\u00ed pues, en el documento CSS podremos buscar alguno de los estilos que utilizan esta etiqueta para fijarnos en la estructura y crear el nuestro.<\/p>\n

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

Como vemos en la imagen, tenemos que escribir la estructura “div<\/strong>.nombre_estilo<\/em>” y, a continuaci\u00f3n, escribir las propiedades que queramos\u00a0 modificar entre corchetes. Si modificamos varias propiedades, tendremos que poner un punto y coma al final de cada l\u00ednea.<\/p>\n

En este caso, el nombre del estilo que vamos a crear es “sangria_francesa_ejemplo<\/em>“. Se puede poner cualquier otro nombre, aunque se recomienda elegir uno descriptivo, de manera que al leerlo, nos hagamos una idea de para qu\u00e9 sirve ese estilo.<\/p>\n

\n
div.sangria_francesa_ejemplo{<\/span>\r\n    background-color<\/span>:<\/span> #D8E5EA<\/span>;<\/span>\r\n    border-color<\/span>:<\/span>#707070<\/span>;<\/span>\r\n    border-style<\/span>:<\/span>solid<\/span>;<\/span>\r\n    border-width<\/span>:<\/span>1px 2px 2px 1px<\/span>;<\/span>\r\n    padding-left<\/span>:<\/span> 7em<\/span>;<\/span>\r\n    padding-right<\/span>:<\/span> 1em<\/span>;<\/span>\r\n    background-image<\/span>:<\/span>url(buttons\/libro_gr.png)<\/span>;<\/span>\r\n    background-repeat<\/span>:<\/span>no-repeat<\/span>;<\/span>\r\n    background-position<\/span>:<\/span>8px 4px<\/span>;<\/span>\r\n    line-height<\/span>:<\/span>200%;<\/span> \/*espaciado doble*\/<\/span>\r\n    margin-right<\/span>:<\/span>26em;<\/span> \/*para provocar que se muestre la sangria*\/<\/span>\r\n}<\/span><\/pre>\n<\/div>\n
En el estilo que hemos introducido, hemos modificado el color de fondo<\/strong> (background-color<\/em>), aplicado un borde <\/strong>para remarcar el bloque de contenido (border-color, border-style, border-width<\/em>), a\u00f1adido una peque\u00f1a imagen a modo de icono <\/strong>(background-image, background-repeat, background-position<\/em>), aumentado el espaciado entre l\u00edneas <\/strong>para que el texto est\u00e9 a doble espacio (line-height) y modificado los m\u00e1rgenes<\/strong> convenientemente para ajustar el contenido a nuestro gusto (margin, padding<\/em>).<\/p>\n
En nuestro documento de Word, tendremos que hacer referencia\u00a0 al estilo que hemos creado de la siguiente manera.<\/p>\n
\n
<div class=\u201d<\/span>sangria_francesa_ejemplo<\/span>\u201d><\/span>\r\n    <p><\/span>\r\n        De Landsheere, G. (1985). Diccionario de la evaluaci\u00f3n y de la investigaci\u00f3n educativa<\/em>. Vilassar de Mar,\r\n\u00a0       Barcelona: Oikos-Tau.\r\n    <\/p>\r\n    <p><\/span>\r\n        Vaquero Rico, J. (2008). Navegaci\u00f3n costera : problemas resueltos<\/em>. (6\u00aa ed.). Madrid: Pir\u00e1mide.\r\n    <\/p>\r\n<\/div><\/span><\/pre>\n<\/div>\n
Entre las etiquetas de p\u00e1rrafo <p> <\/p>, escribiremos el texto que queramos incluir y al que queremos aplicar el formato creado.<\/p>\n
Cuando tengamos el contenido, debemos aplicar el estilo cgHTMLInclude<\/strong> de Wimba Create. De este modo, al generar el documento como HTML podremos visualizar el estilo que hemos definido.<\/p>\n
\"C\u00f3mo<\/a><\/p>\n
\n
<\/a><\/p>\n
 <\/p>\n
cas <\/a>val foro<\/a><\/strong><\/p>\n
El directori per defecte on es troben els esquemes de disseny en espanyol \u00e9s:
\nC:\\Archivos de programa\\WimbaCreate\\resources\\es.lproj\\schemes\\<\/strong><\/p>\n
En obrir la carpeta de qualsevol esquema podrem veure l’estructura mostrada en la seg\u00fcent imatge:<\/p>\n
\"Directorio<\/a><\/p>\n
L’arxiu que hem d’editar, “cg.css”<\/strong>, \u00e9s la fulla d’estil que reconeixerem  per l’extensi\u00f3 CSS. Podem obrir-ho amb un editor HTML o fins i tot, amb  el bloc de notes. Si volem afegir qualsevol imatge en el nostre estil,  \u00e9s convenient guardar-la en la carpeta “buttons<\/strong>“, per a fer refer\u00e8ncies  relatives a l’arxiu.<\/p>\n
Per a aplicar un format diferent a un par\u00e0graf d’un document HTML  s’utilitza, en general, l’etiqueta DIV. Aix\u00ed doncs, en el document CSS  podrem cercar algun dels estils que utilitzen aquesta etiqueta per a  fixar-nos en l’estructura i crear el nostre.<\/p>\n
\"Archivo<\/a><\/p>\n
Com veiem en la imatge, hem d’escriure l’estructura “div<\/strong>.nom_estil<\/em>” i, a  continuaci\u00f3, escriure les propietats que vulguem  modificar entre  claud\u00e0tors. Si modifiquem diverses propietats, haurem de posar un punt i  coma al final de cada l\u00ednia.<\/p>\n
En aquest cas, el nom de l’estil que crearem \u00e9s  “sangria_francesa_exemple<\/em>“. Es pot posar qualsevol altre nom, encara que  es recomana triar un descriptiu, de manera que en llegir-ho, ens fem  una idea de para qu\u00e8 serveix aqueix estil.<\/p>\n
\n
div.sangria_francesa_ejemplo{<\/span>\r\n    background-color<\/span>:<\/span> #D8E5EA<\/span>;<\/span>\r\n    border-color<\/span>:<\/span>#707070<\/span>;<\/span>\r\n    border-style<\/span>:<\/span>solid<\/span>;<\/span>\r\n    border-width<\/span>:<\/span>1px 2px 2px 1px<\/span>;<\/span>\r\n    padding-left<\/span>:<\/span> 7em<\/span>;<\/span>\r\n    padding-right<\/span>:<\/span> 1em<\/span>;<\/span>\r\n    background-image<\/span>:<\/span>url(buttons\/libro_gr.png)<\/span>;<\/span>\r\n    background-repeat<\/span>:<\/span>no-repeat<\/span>;<\/span>\r\n    background-position<\/span>:<\/span>8px 4px<\/span>;<\/span>\r\n    line-height<\/span>:<\/span>200%;<\/span> \/*espaciado doble*\/<\/span>\r\n    margin-right<\/span>:<\/span>26em;<\/span> \/*para provocar que se muestre la sangria*\/<\/span>\r\n}<\/span><\/pre>\n<\/div>\n
En l’estil que hem introdu\u00eft, hem modificat el color de fons<\/strong> (background-color<\/em>), aplicat un cantell <\/strong>per a remarcar el bloc de contingut  (border-color, border-style, border-width<\/em>), afegit una petita imatge a  manera d’icona<\/strong> (background-image, background-repeat,  background-position<\/em>), augmentat l’espaiat entre l\u00ednies<\/strong> perqu\u00e8 el text  estiga a doble espai (line-height) i modificat els marges<\/strong> convenientment  per a ajustar el contingut al nostre gust (margin, padding<\/em>).<\/p>\n
En el nostre document de Word, haurem de fer refer\u00e8ncia  a l’estil que hem creat de la seg\u00fcent manera.<\/p>\n
\n
<div class=\u201d<\/span>sangria_francesa_ejemplo<\/span>\u201d><\/span>\r\n    <p><\/span>\r\n        De Landsheere, G. (1985). Diccionario de la evaluaci\u00f3n y de la investigaci\u00f3n educativa<\/em>. Vilassar de Mar,\r\n        Barcelona: Oikos-Tau.\r\n    <\/p>\r\n    <p><\/span>\r\n        Vaquero Rico, J. (2008). Navegaci\u00f3n costera : problemas resueltos<\/em>. (6\u00aa ed.). Madrid: Pir\u00e1mide.\r\n    <\/p>\r\n<\/div><\/span><\/pre>\n<\/div>\n
Entre les etiquetes de par\u00e0graf <p> <\/p>, escriurem el text que vulguem incloure i al que volem aplicar el format creat.<\/p>\n
Quan tinguem el contingut, hem d’aplicar l’estil cgHTMLInclude<\/strong> de Wimba  Create. D’aquesta manera, en generar el document com HTML podrem  visualitzar l’estil que hem definit.<\/p>\n
\"C\u00f3mo<\/a><\/p>\n
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Si las etiquetas para el formato de contenido que vienen por defecto en Wimba Create se te quedan cortas, o simplemente necesitas aplicar un formato determinado a un p\u00e1rrafo en concreto puedes crear un nuevo estilo de una manera relativamente sencilla. Tendremos que modificar la hoja de estilo del esquema que estemos utilizando y posteriormente, […]<\/p>\n","protected":false},"author":1313,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1606402,6061,3214],"tags":[2765,1606536,6905],"class_list":["post-1166","post","type-post","status-publish","format-standard","hentry","category-aplicacionesaplicacions","category-creacion-de-contenidos-creacio-de-continguts","category-estilos","tag-css","tag-estilos","tag-wimba-create"],"_links":{"self":[{"href":"https:\/\/blogs.ua.es\/observatoriotic\/wp-json\/wp\/v2\/posts\/1166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ua.es\/observatoriotic\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ua.es\/observatoriotic\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/observatoriotic\/wp-json\/wp\/v2\/users\/1313"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/observatoriotic\/wp-json\/wp\/v2\/comments?post=1166"}],"version-history":[{"count":22,"href":"https:\/\/blogs.ua.es\/observatoriotic\/wp-json\/wp\/v2\/posts\/1166\/revisions"}],"predecessor-version":[{"id":1190,"href":"https:\/\/blogs.ua.es\/observatoriotic\/wp-json\/wp\/v2\/posts\/1166\/revisions\/1190"}],"wp:attachment":[{"href":"https:\/\/blogs.ua.es\/observatoriotic\/wp-json\/wp\/v2\/media?parent=1166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ua.es\/observatoriotic\/wp-json\/wp\/v2\/categories?post=1166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ua.es\/observatoriotic\/wp-json\/wp\/v2\/tags?post=1166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}