Iconografía bootstrap para cursos del SEADE Version 4.0.3

REGLAS DE USO:

 

Los iconos 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.

Visulamente, los iconos con borde se ven mas grandes que los iconos 2x sin borde, asi que al momento de diseñar considerar este punto.

 

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.

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 llamar a un vinculo :

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

 

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

En caso de ser pie de pagina o informativo se usa mas pequeño:

Grafico interactivo, seleccione haciendo clic sobre la imagen.


En el caso que se utilice los iconos como botones dentro del bloque de texto, se deben escalar usando la clase fa-large, NO deben llevar descripción y el vínculo o enlace se debe realizar desde el respectivo icono, 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 icono 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.

fa CLASE APLICACION

 fa-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.

 fa-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.

 fa-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.

 fa-camera

Se emplea para: “VER” una fotografía o imagenes 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.

 fa-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.

 fa-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.

 fa-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.
 fa-youtube-square

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.

 

 fa-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.

 fa-mail-reply

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.

 

 fa-hand-right

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 pagina con el icono como elemento decorativo (sin acción de botón) del texto o cuadro a destacar.

 fa-print

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

 

 fa-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.

 fa-volume-up

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

 fa-search-plus

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.

 

 fa-tags

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

<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-user fa-stack-1x fa-inverse"></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.