Iconografía bootstrap para cursos del SEADE

Version 3.2.1 

Los íconos que a continuación se describen y muestran, corresponden a la simbología actualizada, normalizada y definida que se debe emplear en la producción de cursos a distancia del SEADE.
ICON CLASE APLICACION

 icon-file-text

Se emplea para: Indicar que existe un vínculo a un “DOCUMENTO DEL CURSO”, el cual se podrá visualizar haciendo clic sobre este ícono y esperar que se ejecute el software respectivo para visualizarlo.

 icon-th

 Se emplea para: Indicar que existe un vínculo a una imagen de “Gráficos, datos e información estadística o infografías”. Se podrá visualizar haciendo clic sobre este ícono, el contenido se desplegará en la misma página o en una página nueva (dependiendo de las características de la información), en esta segunda opción se emplea botón volver para regresar a la página desde donde se activa.

 icon-book

 Se emplea para: Indicar que existe un vínculo a “BIBLIOGRAFÍA RECOMENDADA O SUGERIDA (manuales o libros completos)”, se podrá visualizar haciendo clic sobre este ícono y esperar que se ejecute el software respectivo para visualizarlo.

 icon-camera

Se emplea para: “VER” una fotografía o imágenes relacionadas como apoyo a un contenido. Se puede visualizar en la misma página o en una página nueva (dependiendo de las características de la información), en esta segunda opción se emplea botón volver para regresar a la página desde donde se activa.

 icon-check

Se emplea para: indicar que existe un vínculo a una “EVALUACIÓN SUMATIVA o FORMATIVA”, realizada por el tutor o por sistema (en línea) correspondiente al tema o contenido que se está visualizando.

 icon-edit

Se emplea para: indicar que existe un vínculo a la descripción de una “ACTIVIDAD formativa o sumativa” práctica o de interacción en PTE, correspondiente al tema o contenido que se está visualizando.

 icon-film

 Se emplea para: “VER” un vídeo o animaciones relacionadas como apoyo a un contenido. Se puede visualizar en la misma página o en una página nueva (dependiendo de las características de la información), en esta segunda opción se emplea botón volver para regresar a la página desde donde se activa.
 icon-youtube-sign

Se emplea para: “VER” un vídeo o animaciones relacionadas como apoyo a un contenido.

Se debe utilizar solo cuando el vídeo tenga un peso muy alto y no sea posible insertarlo en el contenido. Debe visualizarse haciendo clic sobre este ícono y esperar que se ejecute en una ventana externa.

 

 icon-globe

Se emplea para: Indicar que existe un vínculo o enlace a un “SITIO O PÁGINA WEB”, el cual se podrá visualizar haciendo clic sobre este ícono y esperar que se ejecute para visualizarlo en una ventana externa.

 icon-mail-reply

Se emplea para: Se emplea para: “VOLVER” desde un documento o páginas dentro de un mismo contenido.
IMPORTANTE: Siempre vuelve a la página desde donde se genera el vínculo.

 

 

 icon-hand-right

 

icon-hand-up

Se emplea como: "RECUERDE", "IMPORTANTE". Indica que ese contenido o información es importante o clave dentro de la asignatura, unidad, objeto de aprendizaje, etc.

Al posicionarse sobre el ícono se puede generar un rollover u otra forma para destacar la información.

Puede estar inserto dentro de la misma página con el ícono como elemento decorativo (sin acción de botón) del texto o cuadro a destacar.

Puede ser usado en dos posiciones indicando un objeto o bloque de texto o como pie de foto indicando hacia la imagen.

 icon-print

Se emplea para: indicar que existe un vínculo a una información “IMPRIMIBLE” y necesaria para el desarrollo del contenido.

 

 icon-question-sign

Se emplea para: “AYUDAS”, permite al usuario recurrir a los sistemas de ayudas solo del curso, sus contenidos, actividades, evaluaciones, etc. Su empleo se determina en el proceso de mediatización y desarrollo del guión de contenidos.

 icon-volume-up

Se emplea para: Indicar que existen “AUDIOS” como contenido o apoyos a estos.

 icon-zoom-in

Se emplea para: “VER MAS o DESTACAR” párrafos, frases, información relevante, u otros contenidos de corta extensión y que generalmente se visualizan en la misma página.

 

 icon-tags

Se emplea para: “RESUMEN” Se utiliza al final de cada unidad de contenido, puede usarse como botón que llame una ventana emergente o dentro de la misma página como elemento decorativo.

<span class="icon-stack icon-2x">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-user icon-light"></i>
</span>

Se emplea para: “VER AVATAR MILITAR”, es una animación en 2D con audio que se utiliza para ver explicaciones de algún contenido o para reflexiones importantes.

 

REGLAS DE USO:

 

IMPORTANTE: Cada curso es una producción independiente, por lo tanto, todos los íconos empleados en un curso deben ser aplicados de igual forma (ubicación en la diagramación, con o sin borde, igual color, tamaño definido y características del texto del ícono). Los tamaños de los íconos estan pre-definidos en 2x, que es el equivalente aproximado de 35px.

Todos los íconos pueden ser utilizados con borde alrededor del ícono (como se muestra en el ejemplo), o bien, sólo el ícono sin borde como se muestra en la descripción de cada uno de ellos.

Visualmente, los íconos con borde se ven más grandes que los íconos 2x sin borde, así que al momento de diseñar considerar este punto.

 

La descripción o nombre del contenido de cada ícono, debe ser diagramada a continuación del ícono, como se indica en el ejemplo.

En caso de ser pie de página o informativo se usa más pequeño tamaño icon-large:

En caso de llamar a un vínculo:

Visto en: Comunicación orientadora y acción tutorial en Educación.

 

En el caso que se utilice los íconos como botones dentro del bloque de texto, se deben escalar usando la clase icon-large, NO deben llevar descripción y el vínculo o enlace se debe realizar desde el respectivo ícono, como lo muestra el ejemplo.

La modalidad Educación a distancia exige que el tutor conozca cabalmente quién es su alumno, que necesidades tiene, que capacidades, que condiciones, para así orientarlo eficientemente. Por ejemplo, para sugerirle actividades complementarias , debe conocer sus particularidades y sus gustos.

** El vínculo de la lupa debe estar dirigido a un tooltip o popover según la necesidad gráfica.

 

 

Cuando se aplique el ícono de "avatar militar", se debe usar siempre de la misma forma como se muestra en el ejemplo (Diseño y tamaño). Sin embargo se puede modificar en color para seguir la línea grafica del curso. Se puede aplicar usando un "modal" como muestra la imagen o un "popover".

 

Por razones de difusión del documento, el presente archivo NO se encuentra vinculado a una hoja de estilos bootstrap, por lo tanto todas las acciones se reducen a imágenes y al conocimiento obtenido en la capacitación.