Iconografía bootstrap para cursos del SEADEVersion 3.2.1Los í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 | |||||
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. |
|||||||
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. | |||||||
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. | |||||||
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. |
|||||||
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. |
|||||||
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. |
|||||||
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.
|
||||||
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. |
|||||||
Se emplea para: Se emplea para: “VOLVER” desde un documento o páginas dentro de un mismo contenido.
|
|||||||
|
|
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. |
|||||
Se emplea para: indicar que existe un vínculo a una información “IMPRIMIBLE” y necesaria para el desarrollo del contenido.
|
|||||||
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. |
|||||||
Se emplea para: Indicar que existen “AUDIOS” como contenido o apoyos a estos. |
|||||||
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.
|
|||||||
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"> |
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.
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. |