Saltar al contenido principal
pdf?stylesheet=default
Blackboard Help

Crear y subir paquetes de íconos

El bloque Express viene con la posibilidad de elegir un paquete de íconos al crear un diseño Express para su institución. Un paquete de íconos es un conjunto de íconos utilizados para identificar actividades, como enlaces en la interfaz. Express permite a los administradores del sitio agregar sus propios paquetes de íconos a fin de crear una cantidad ilimitada de íconos aprobados para la interfaz del sitio web, para que sus usuarios elijan.

Cómo crear un paquete de íconos

Los paquetes de íconos se crean en su equipo local y, luego, usted sube los paquetes en Express. Esta sección abarca los aspectos técnicos de un paquete de íconos Express, la estructura de archivo y el archivo de manifiesto XML específicos de un paquete de íconos Express.

Revise los detalles de la estructura de un paquete de íconos a medida que crea el suyo propio.

Debe tener conocimientos del código XML para crear sus propios paquetes de íconos.

Estructura del archivo comprimido del paquete de íconos Express

A continuación hay una lista de carpetas y archivos que conforman la estructura del paquete de íconos Express (no se requieren todos los archivos). Debe comprimir los paquetes de íconos Express antes de subirlos en el sitio web de su institución.

pix_core/ (opcional)
pix_plugin/ (opcional)
style/ (opcional)
style/core.css (opcional)
manifest.xml
sample.png

Descargue y extraiga el ícono pack_example.zip para ver un ejemplo de paquete de íconos.

Directorio Pix Core (pix_core/)

El directorio Pix Core incluye todos los íconos centrales para funciones de navegación, calendario y edición. La estructura de la carpeta pix_core se parece a la siguiente (todos los archivos y carpetas son opcionales):

a/ - íconos Acción para la barra de navegación
c/ - íconos de curso
f/ - íconos de tipo de archivo
g/ - íconos de grupo
i/ - íconos de interfaz que no están asociados con los bloques o la navegación.
m/ - íconos de dinero
s/ - íconos emoticón de carita feliz
t/ - normalmente, íconos de bloques y navegación
u/ - ícono de imagen de usuario
y/ - íconos YUI
adv.gif
b.gif
docs.gif
help.gif
madewithmoodle.gif
moodlelogo-med-white.gif
moodlelogo-med.gif
moodlelogo.gif
movehere.gif
req.gif
spacer.gif
webding.png

Dentro de cada directorio hay una cierta cantidad de íconos. El pix_core.zip incluye todos los íconos que puede encontrar en la opción Crear un diseño del bloque Express. No es necesario subir o remplazar todos los íconos de la carpeta. Express utilizará de manera predeterminada el ícono de Moodle/Joule para cualquier archivo de ícono que no se haya subido. Los archivos de ícono se pueden guardar en formato .gif, .jpg, .jpeg o .png. Express hará que los íconos se muestren con un ancho de 20 píxeles y una altura de 20 píxeles.

Directorio Pix Plugins (pix_plugins/)

El directorio Pix Plugins incluye los íconos que utilizan los bloques, las actividades y los repositorios. La estructura de la carpeta pix_plugins se parece a la siguiente (todos los archivos y carpetas son opcionales):

bloques/ - íconos específicos del bloque
local/ - íconos para extensiones locales, como el diseñador de aprendizaje personal
local/pld
mod/ - íconos de actividades; cada uno debería tener una subcarpeta con el nombre de directorio de la actividad y al menos un archivo icon.gif
mod/tarea
mod/libro
mod/chat
mod/opción
mod/datos
mod/retroalimentación
mod/carpeta
mod/foro
mod/glosario
mod/imscp
mod/etiqueta
mod/lección
mod/página
mod/prueba
mod/recurso
mod/scorm
mod/encuesta
mod/wiki
mod/taller
mod/url
repositorio/ - íconos de extensión del repositorio
repositorio/reciente
repositorio/servidor
repositorio/subir
repositorio/usuario

Cada directorio de extensión tiene subdirectorios para cada extensión con íconos. Dentro del subdirectorio hay un archivo icon.gif que se visualiza cuando se muestra la actividad en un curso. pix_plugin.zip incluye todos los directorios e íconos de extensiones que puede encontrar en la opción Crear un diseño del bloque Express. No es necesario subir o remplazar todos los íconos de la carpeta. Express utilizará de manera predeterminada el ícono de Moodle/Joule para cualquier archivo de ícono que no se haya subido. Los archivos de ícono se pueden guardar en formato .gif, .jpg, .jpeg o .png. Express hará que los íconos se muestren con un ancho de 20 píxeles y una altura de 20 píxeles.

Directorio de estilo (style)

El directorio de estilo incluye la hoja principal de estilos en cascada utilizada por el paquete de íconos.

core.css (opcional)

El archivo core.css incluye las CSS utilizadas para controlar el tamaño de los íconos y las CSS para cualquier ícono que se utilice como imagen de fondo. Moodle/Joule utiliza un ancho de 16 píxeles y un alto de 16 píxeles para íconos grandes, y un ancho de 11 píxeles y un alto de 11 píxeles para íconos pequeños. Express utiliza un ancho de 20 píxeles y un alto de 20 píxeles para íconos grandes, y un ancho de 16 píxeles y un alto de 16 píxeles para íconos pequeños. Utilice core.css para cambiar la altura y el ancho según el tamaño de los íconos en el paquete de íconos. Además, cambie cualquier espaciado necesario para asegurarse de que los íconos de navegación tengan suficiente espacio para el tamaño del ícono.

img.iconsmall { height:11px; width:11px;}
img.icon {height:16px;width:16px;}

.course-content .section .activity img.activityicon {height:16px;width:16px;}

.path-grade-report-grader .gradestable img.smallicon {width:11px; height:11px;}

.block .block_tree .tree_item,
.block_settings .block_tree .tree_item,
.block_navigation .block_tree .tree_item {padding-left:18px; padding-bottom: 3px; margin-top:0; margin-bottom:0;}

.block_navigation .block_tree li.item_with_icon > p img,
.block_navigation .block_tree .type_activity > .tree_item.branch img,
.block_settings .block_tree li.item_with_icon > p img {top:0px;}

.block_navigation .block_tree li.item_with_icon.contains_branch .tree_item{ padding-left: 34px;}
ul.block_tree ul ul li.item_with_icon.contains_branch p img{width: auto; height:16px;}
ul.block_tree ul ul ul li.item_with_icon.contains_branch p img{width: auto; height:16px;}

ul.block_tree li .tree_item.emptybranch,
ul.block_tree li .tree_item.branch{background-size: auto 16px;-moz-background-size: auto 16px;}
ul.block_tree ul li .tree_item.emptybranch,
ul.block_tree ul li .tree_item.branch{background-size: auto 14px;-moz-background-size: auto 14px;}
ul.block_tree ul ul li .tree_item.emptybranch,
ul.block_tree ul ul li .tree_item.branch{background-size: auto 12px;-moz-background-size: auto 12px;}
ul.block_tree ul ul ul li .tree_item.emptybranch,
ul.block_tree ul ul ul li .tree_item.branch{background-size: auto 10px;-moz-background-size: auto 10px;}

CSS de íconos de fondo

Moodle/Joule tiene determinados íconos que se utilizan en el archivo core.css como imágenes de fondo. Express sigue el mismo método para identificar cadenas en los CSS que deberían remplazarse con una url que conduzca al ícono indicado por la cadena. El método es iconame. Para utilizar las actividades del taller userplan task-todo.png en un CSS, debería utilizar userplan/task-todo. mod_workshop informa al sitio que busque en pix_plugins/mod/workshop, y userplan/task-todo informa al sitio que utilice la imagen task-todo (la extensión del archivo puede ser gif, png, jpg o jpeg) en el subdirectorio userplan. El siguiente CSS abarca todos los íconos que un paquete de íconos podría cambiar, y el CSS que el tema Express necesita para mostrar el ícono de forma correcta.

.course_category_tree .category,
#dockeditempanel .dockeditempanel_hd {background-image:url(hgradient);}
#dock,
#dock .dockeditem .dockedtitle {background-image:url(vgradient);}
yui-skin-sam .repository_ggfl_search_panel .ft span.default,
.yui-skin-sam .repository_ggfl_search_panel .yui-button {background-image:url(gradient);}
#page-blocks-community-communitycourse .star-rating{background-image:url(star-rating);}
#page-blocks-community-communitycourse .star-rating li.current-rating{background-image:url(star-rating);}

/* block navigation and setting icons*/
.course_category_tree .category.with_children>.category_label,
.block_settings .block_tree .tree_item.branch,
.block_navigation .block_tree .tree_item.branch {background-image:url(expanded);}
.jsenabled .block_settings .block_tree .tree_item.emptybranch,
.jsenabled .block_navigation .block_tree .tree_item.emptybranch {background-image:url(collapsed empty);}
.smartselect .smartselect_submenuitem,
.jsenabled .course_category_tree .category.with_children.collapsed .category_label,
.jsenabled .block_settings .block_tree .collapsed .tree_item.branch,
.jsenabled .block_navigation .block_tree .collapsed .tree_item.branch {background-image:url(collapsed);}
.jsenabled .block_navigation .block_tree .tree_item.branch.loadingbranch {background-image:url(loading small);}
.jsenabled.dir-rtl .block_settings .block_tree .tree_item.emptybranch,
.jsenabled.dir-rtl .block_navigation .block_tree .tree_item.emptybranch {background-image:url(collapsed empty rtl);}
.jsenabled.dir-rtl .block_settings .block_tree .collapsed .tree_item.branch,
.jsenabled.dir-rtl .block_navigation .block_tree .collapsed .tree_item.branch {background-image:url(collapsed rtl);}
.path-mod-quiz .qnbutton.flagged {background-image:url(ne red mark);}

/* Workshop icons*/
.path-mod-workshop .userplan tr.phasetasks li {background-image:url(userplan/task-todo);}
.path-mod-workshop .userplan tr.phasetasks li.completed {background-image:url(userplan/task-done);}
.path-mod-workshop .userplan tr.phasetasks li.fail {background-image:url(userplan/task-fail);}
.path-mod-workshop .userplan tr.phasetasks li.info {background-image:url(userplan/task-info;}

.path-course-view li.activity form.togglecompletion .ajaxworking {background-image:url(ajaxloader);}
.course_category_tree .category .courses .course_link {background-image:url(course);}

/* filepicker */
/* first or middle sibling, no children */
.file-picker .ygtvtn {background-image:url(tn);}
/* first or middle sibling, collapsable */
.file-picker .ygtvtm {background-image:url(tm);}
/* first or middle sibling, collapsable, hover */
.file-picker .ygtvtmh {background-image:url(tmh);}
/* first or middle sibling, expandable */
.file-picker .ygtvtp {background-image:url(tp);}
/* first or middle sibling, expandable, hover */
.file-picker .ygtvtph {background-image:url(tph);}
/* last sibling, no children */
.file-picker .ygtvln {background-image:url(ln);}
/* Last sibling, collapsable */
.file-picker .ygtvlm {background-image:url(lm);}
/* Last sibling, collapsable, hover */
.file-picker .ygtvlmh {background-image:url(lmh);}
/* Last sibling, expandable */
.file-picker .ygtvlp {background-image:url(lp);}
/* Last sibling, expandable, hover */
.file-picker .ygtvlph {background-image:url(lph);}
/* Loading icon */
.file-picker .ygtvloading {background-image:url(loading);}
/* the style for the empty cells that are used for rendering the depth* of the node */
.file-picker .ygtvdepthcell {background-image:url(vline);}

img.folder_icon{ background-image:url(folder_open); }
.collapsed img.folder_icon { background-image:url(folder); }

Archivo de manifiesto del paquete de íconos (manifest.xml)

El archivo de manifiesto del paquete de íconos se utiliza para guardar información acerca del paquete de íconos que se mostrará en la función Crear un diseño del bloque Express. Un archivo manifest.xml se parece a la siguiente estructura:

<?xml version="1.0" encoding="UTF-8"?>
<iconpack>
<name>Serene grayscale</name>
<directory>serenegray</directory>
<notes>Estos íconos son los mismos que los del paquete de íconos de tranquilidad, excepto que están en blanco y negro, lo que puede funcionar mejor con algunas plantillas.</notes>
</iconpack>

La etiqueta <directory> se utiliza para el nombre del directorio en el que está guardado el paquete de íconos. Esta etiqueta es secundaria de <iconpack> y es obligatoria. El bloque Express hará lo siguiente con el valor de esta etiqueta:

  • Crear un directorio con este valor, en el que todos los archivos del paquete de íconos se guarden en el directorio moodledata/express/iconpacks cuando el paquete de íconos se suba mediante la pestaña Paquetes de íconos.
  • Utilizar este valor para ubicar imágenes del paquete en los directorios pix_core y pix_plugins para el paquete de íconos cuando se crea un diseño a partir de una plantilla.
  • Utilizar este valor para ubicar sample.png para el paquete de íconos cuando es seleccionado por el usuario en la subpestaña Crear un diseño.

La etiqueta <name> es el nombre visualizado para el paquete de íconos en todas las ubicaciones en las que Express muestra el paquete de íconos. Esta es una etiqueta secundaria de <iconpack> y es obligatoria.

Imagen de muestra del paquete de íconos (sample.png)

La imagen de muestra del paquete de íconos (sample.png) es un collage de íconos en los directorios pix_core y pix_plugins. La imagen de muestra del paquete de íconos está disponible en la página Crear un diseño, con el objetivo de proporcionarle una muestra de cómo se verán los íconos.

Cómo subir un paquete de íconos

Después de crear el paquete de íconos, puede subir los íconos al sitio web de su institución mediante el bloque Express.

  1. Desde el bloque Express , seleccione Paquetes de íconos.
  2. Haga clic en Upload an icon pack zip.
  3. Haga clic en Elegir archivo para acceder a la ventana de selección del archivo.
    • Seleccione Subir un archivo.
    • Haga clic en Elegir archivo.
    • Diríjase al paquete de íconos que desea subir y selecciónelo. Haga clic en Abrir.
    • Haga clic en Subir este archivo.
    • Haga clic en Subir.

      Si el paquete de íconos tiene la estructura correcta, se subirá correctamente.

      Si una carpeta o un archivo no está en la estructura correcta, verá un mensaje de error de color rojo que le advierte que el archivo no es parte de un paquete de íconos Express, para cada archivo inesperado. Estos archivos se eliminarán antes de agregar el paquete de íconos a Express como una medida de seguridad. Es posible tener archivos eliminados y aún así subir correctamente un paquete de íconos.

  4. Haga clic en Save icon pack cuando termine.

También puede eliminar o descargar paquetes de íconos desde la pestaña Paquetes de íconos .