1

MANUAL DEVIRTUALIZACIÓN WEB

2

3

Índice

ÍNDICE

ÍNDICE•Introducción•Plataforma MOODLE •Diagramación soporte web y aplicación de color -Color -Banners -Licencias -HTML -Uso de tipografías •Formato de imágenes -Tipos de imágenes -Dimensiones -Animaciones•Portal web CFV

>Descarga de material.

4

5

INTRODUCCIÓN

La imagen o identidad gráfica web utilizada en la Universidad Nacional Experimental de la Seguridad (UNES) es la expresión de la personalidad que la define visualmente y la diferencia de las demás a través de la identidad, transmitiendo al usuario y usuaria su carácter, esencia y valores fundamentales. Desde UNES Virtual, coordinación adscrita a la Dirección del Despacho del Vicerrectorado de Desarrollo Académico (VRDA), se implementan procesos académicos formativos y evaluativos a través de las TIC, por medio de la herramienta Moodle como plataforma educativa, por tanto, se estableció crear y definir la identidad web de dicha plataforma para proyectar a sus usuarios y usuarias una nueva y limpia imagen. La identidad gráfica de la plataforma educativa representa simbólicamente a la UNES siendo capaz de establecer referencia visual de los valores consagrados sin salir de los objetivos principales de su identidad gráfica, basándose en su emblema y respaldado con la gama de los pantones representativos de la universidad. De igual forma, la identidad gráfica es un factor de fundamental importancia para el posicionamiento

Introducción

INTRODUCCIÓN

de la plataforma educativa Moodle considerando los diferentes procesos formativos que ofrece nuestra casa de estudios, si la identidad gráfica atrae la atención, es fácil de comprender, expresa credibilidad, confianza, será fácil recordar y, en consecuencia, el posicionamiento será sólido y duradero.

Por todo lo anterior, se justifica la creación de este manual de identidad web para la plataforma educativa Moodle, que permitirá entender fácilmente la correcta reproducción y aplicación técnica respecto a la creación de entornos web bajo el nombre de la UNES. Seguir dicho manual, garantiza que el producto web cumplirá las características de una buena marca de identidad institucional que exige legibilidad, prestancia, alta vigencia en el tiempo, pertinencia tipológica y versatilidad de usos.

Tomando en consideración estos aspectos, presentamos a continuación el manual de identidad web de la UNES, que no pretende coartar la libertad de

ideas, pero sí el establecimiento de una línea única y su respectivo sistema de identificación estable para los diseños de los procesos formativos en línea, además de permitir el buen manejo de la identidad visual de la plataforma educativa Moodle de nuestra casa de estudios.

6

LOGOS UTILIZADOS

Logos utilizados

LOGOS

UNESEl logo es esencialmente un dispositivo tipográfico que consta de tres partes diferenciadas horizontalmente.Primero, un conjunto principal que resalta al mirar el emblema rápidamente.Esta parte esta formada por las letras U, N, E, S donde se lee la palabra UNES resaltando la letra S, que a diferencia

de las otras es una letra construida por el juego de figura y fondo de un

rectángulo abierto (fenómeno de cerramiento y contra forma).

Gobierno bolivarianoLos elementos de identidad definidos para el logotipo del Gobierno Bolivariano de Ve-nezuela se mantienen vigentes tal y como se verá a continuación. Aquí se incorpora el ciclo de comunicación comprendido entre 2012-2013.

CFVAl igual que el logo UNES, es un logo ti-pográfico usando la misma fuente Myriad Pro. En su forma fraccionada el logo mues-tra las siglas C,F,V abreviaturas de Centro de Formación Virtual, el cual en su versión completa justo debajo de ellas se lee Cen-tro de Formación Virtual.

>Consultar manual de identidad UNES.

págs. 8 a la 9págs.12 a la 21

>Consultar manual de identidad UNES.

págs. 8 a la 9págs.12 a la 21

>Consultar manual de identidad.págs. 1 a la 8

>Consultar manual de identidad. págs. 1 a la 8

LOGO UNES (UNIVERSIDAD

NACIONAL EXPERIMENTAL DE LA

SEGURIDAD)

LOGO GOBIERNO BOLIVARIANO DE

VENEZUELA

LOGO CFV (CENTRO DE

FORMACIÓN VIRTUAL)

7

ANCHO DE CUERPO PRINCIPAL 980px

ANCHO DE CUERPO PRINCIPAL 980px

DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR

Retícula Soporte Vertical en cada plataforma MOODLE.

DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR

8

Retícula Soporte Vertical en cada plataforma MOODLE.

Como cintillo o “header” se ubica la coletilla del MINCI.

Se estructura paralelamente un banner flash con el uso del em-blema UNES a su derecha.

Pie de página o“foo-ter” identificado con el dispositivo gráfico del CFV y el emblema de la plataforma MOODLE.

En cuanto al color aplicado en la plataforma web, sólo se apli-can los permitidos en la gama de pantones referenciados en el manual de identidad UNES.COLOR

Diagramado a tres columnas

ANCHO DE CUERPO PRINCIPAL 980px

Te invitamos a visitar nuestra plataforma educativa http://cfv.unes.edu.ve:8081/docentes/

PÁGINA PRINCIPAL

235px 445px 300px

“BODY”

DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR

9

ColorPaleta de identidad

Gama Primaria

Colores del Logo

Gama Secundaria / Acento

Gama Secundaria / Fondo

Gama Detalle (colores del logo)

color Paleta de identidad

DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR

>Consultar manual de identidad UNES.pág.11

10

Como cintillo o´ “header” se ubica la coletilla del MINCI.

El banner etiqueta identifica el encuentro didáctico de cada proceso formativo en línea.

Los banners tienen el propósito de identificar el nombre del proceso formativo en línea que se esté administrando en un momento dado.

El banner logo identifica el proceso formativo en línea.BANNERS

Diagramado a dos columnas

TAMAÑO DE BANNER PRINCIPAL 678 X 141px

TAMAÑO DE BANNER ETIQUETA 680 X 99px

Retícula Soporte Vertical en cada plataforma MOODLE.

DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR

ANCHO DE CUERPO 980px

MENÚ DE ENCUENTROS /MÓDULOS

11

TAMAÑO DE BANNER INTERNO 780 X 82px

LAS IMÁGENES DE INTERÉS QUE ACOMPAÑEN AL TEXTO, DEBEN IR DIAGRAMADAS EN LA ESQUINA SUPERIOR DERECHA, DEJANDO 10 PX DE MARGEN ENTRE EL TEXTO

Y LA IMAGEN.

Retícula Soporte Vertical en cada plataforma MOODLE.

DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR

Diagramado a dos columnas

TAMAÑO DE BANNER EXTERIOR 440 X 200px

Banner interno le recuerda al usuario en qué unidad curricular se encuentra y va ubicado dentro de todas las actividades a realizar.

Banner exterior, es usado para ubicar e informar al usuario o usuaria de la plataforma en qué proceso formativo se encuentra. También puede ser usado para publicar noticias respecto al proceso formativo en cuestión.

PÁGINA PRINCIPAL

CONTENEDOR DE ACTIVIDAD

12

Las licencias Creative Commons es un conjunto de licencias de copyright (derechos de autor). Existen seis tipos de licencias, en nuestro caso usamos Reconocimiento-NoComercial-CompartirIgual (CC-BY-NC-SA).

RECONOCIMIENTO (BY) El beneficiario de la licencia tiene el derecho de copiar, distribuir, exhibir y representar la obra y hacer obras derivadas siempre y cuando reconozca y cite la obra de la forma especificada por el autor o el licenciante.

NO COMERCIAL (NC)El beneficiario de la licencia tiene el derecho de copiar, distribuir, exhibir y representar la obra y hacer obras derivadas para fines no comerciales

COMPARTIR IGUAL (SA) El beneficiario de la licencia tiene el derecho de distribuir obras derivadas bajo una licencia idéntica a la licencia que regula la obra original.

LICENCIASTAMAÑO DE LICENCIA CREATIVE COMMONS

740 X 52px

Retícula Soporte Vertical en cada plataforma moodle.

DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR

CONTENEDOR DE ACTIVIDAD

13

Retícula Soporte Vertical /Código HTML plantilla de contenidos.

DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR

Código HTML PLANTILLA TIPO (PAGINA WEB)

<div id=”CUERPOBASE” style=”width: 764px; height: auto; background-color: #ffffff;”><div id=”PORTABANNER” style=”width: 740px; height: auto;”><p><img alt=”Teoria tradicional y critica de los derechos humanos” style=”margin: 0px;” id=”fotobanner” title=”Banner principal” src=”http://cfv.unes.edu.ve:8081/diplomado2/draftfile.php/15/user/draft/949680678/TTCDH_banner_internoo.gif” height=”78” wid-th=”740” /></p></div><div id=”PORTATITULO” style=”width: 730px; height: 30px; background-color: #a54399;”>Titulo con sombra</div><div id=”CUERPOPRINCIPAL” style=”width: 740px; height: auto; background-color: #ffffff;”><table style=”width: 735px; height: 542px;” border=”0”><tbody><!-- AQUÍ COMIENZA LA TABLA DEL CUERPO CENTRAL --><tr><td style=”text-align: justify;” valign=”top” width=”NaNpx”>empezar a escribir desde esta linea y borrarla despues de utilizada</td></tr></tbody></table></div><div id=”LICENCIA” style=”width: 740px; height: 52px; background-color: #ffffff;”><p><img style=”margin: 0px;” title=”Licencia Creative Commons” alt=”Licencia Creative Commons” src=”http://cfv.unes.edu.ve:8081/recursos/imagenes/bannerlicencia.gif” width=”740” /></p></div><div style=”height: 3px;”></div><!-- no tocar este div pues es el que le da el espacio final--><p></p></div>

La aplicación de las plantillas usadas para la redacción de actividades están diseñadas en base de <div> o ventana de código HTML, siendo específicas para el tamaño y favorable para la lectura. Se anexa el código HTML con notas acerca de su funcionabilidad.

PLANTILLA

CUERPO BASE “CUERPOBASE”: Es el fondo o background que contiene a la platilla en general.

La plantilla está estructurada de la siguiente manera:

PORTA BANNER“PORTABANNER”: Este contiene el banner interno de la unidad curricular correspondiente.

PORTA TÍTULO “PORTATÍTULO”: Es el que presenta el titulo de la actividad a realizar.

CUERPO PRINCIPAL“ C U E R P O P R I N C I P A L” : Desde donde se empiezan a estructurar las instrucciones y el contenido.

LICENCIA“LICENCIA”: En este <div> o recuadro de estilo se ubica la licencia creative commns.

HTML

14

Código HTML PLANTILLA TIPO (FORO)

<DIV CLASS=”CUERPOBASE” STYLE=”WIDTH: 720PX; HEIGHT: AUTO; BACKGROUND-COLOR: #FFFFFF;”><div class=”PORTABANNER” style=”width: 705px; height: auto;”><P><IMG STYLE=”MARGIN: 0PX;” TITLE=”BANNER PRINCIPAL” SRC=”HTTP://CFV.UNES.EDU.VE:8081/DIPLOMADO2/BROKENFILE.PHP#/15/USER/DRAFT/992507950/TTCDH_BANNER_INTERNOO.GIF” ALT=”BANNER FORO TAMAÑO 710” WIDTH=”705” /></P></DIV><div class=”PORTATITULO” style=”width: 700px; height: 30px; background-color: #a54399;”><span>-Titulo con sombra</span></div><div class=”CUERPOPRINCIPAL” style=”width: 710px; height: auto; background-color: #ffffff;”><table style=”width: 699px; height: 542px;” border=”0”><tbody><tr><td style=”text-align: justify;” valign=”top”><br />escribir</td></tr></tbody></table></div><div class=”LICENCIA” style=”width: 705px; height: 52px; background-color: #ffffff;”><p><img style=”margin: 0px;” title=”Licencia Creative Commons” src=”http://cfv.unes.edu.ve:8081/recursos/imagenes/bannerlicencia.gif” alt=”Licencia Creative Commons” width=”705” /></p></div><div style=”height: 3px;”></div><p></p></div>

TIPO DE PLANTILLASPLANTILLA TIPO FOROLa plantilla para foros tiene un ancho de 720 px, siendo más angosta que la plantilla para página web, por ende, el tamaño de los banner debe ajustarse de acuerdo a estas dimensiones.

PLANTILLA TIPO PÁGINA WEBEsta plantilla se usa como estándar para contener las instrucciones de las actividades de cada unidad curricular a cursar, la misma fue presentada en la página anterior como “plantilla tipo página web”.

Retícula Soporte Vertical /Código HTML plantilla de contenidos.

DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR

15

Uso de tipografía

DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR

El uso de la tipografía en la plataforma web se limita a dos tipos de familias tipográficas: Arial y Calibri. Las mismas facilitan la lectura, guardan semejanza con la tipografía permitida en el manual de identidad UNES y tienen disponibilidad en los distintos navegadores.

TIPOGRAFÍAFamilia Arial

Texto de título y contenidos para

formatos electrónicos

TIPOGRAFÍAFamilia CalibriTexto de título y contenidos para formatos electrónicos

Arial Regular (12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Arial Bold (12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Arial Bold Italic(12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Arial italic(12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Arial Regular (12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz1234567890

Arial Bold (12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz1234567890

Arial Bold Italic(12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz1234567890

Arial italic(12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz1234567890

USO DE TIPOGRAFÍA

>Consultar manual de identidad UNES.págs. 22 a la 24

16

Uso de tipografía

DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR

La tipografía permitida para las imágenes diseñadas para la plataforma web: banners, imágenes de interés, íconos, entre otras utilizan la familia Myriad Pro.

TIPOGRAFÍAFamilia Myriad Pro

Texto de título y contenidos breves

Myriad Pro Regular (12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890Myriad Pro Bold (12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890Myriad Pro Bold Italic(12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890Myriad Pro Ligth (12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890Myriad Pro Ligth Italic(12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890Myriad Pro italic(12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Myriad Pro Semi Extended (12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890Myriad Pro Semi Extended Bold (12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890Myriad Pro Semi Extended Ligth (12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890Myriad Pro Semi Extended italic(12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890Myriad Pro Bold Semi Extended Italic(12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890Myriad Pro Ligth Semi Extended Italic(12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Myriad Pro Condensed (12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890Myriad Pro Condensed Bold (12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890Myriad Pro Condensed Ligth (12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Myriad Pro Condensed italic(12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Myriad Pro Ligth Condensed Italic(12pts)ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

USO DE TIPOGRAFÍA

17FOTOGRAFÍAS REPRESENTATIVAS A LA

UNES.

VECTORES PLANOS REPRESENTADOS POR

LOS COLORES INSTITUCIONALES.

VECTORES PLANOS QUE RESPETAN LOS

COLORES INSTITUCIONALES, USO DE LAS

TIPOGRAFÍAS PERMITIDAS.

FORMATO DE IMÁGENES

Formato de imágenes

FORMATO DE IMÁGENES

18

Las imágenes utilizadas en la plataforma web se presentan en vectores, imágenes fotográficas, ilustraciones y animaciones .Gif o .apng.Las imágenes vectoriales se presentan en colores planos, siguiendo el pantone institucional complementado por las tipografías correspondientes. Se encuentran frecuentemente pictogramas de personas que representan a discentes/as, funcionarios/as u otras identidades representativas de la UNES.Las fotografías deben representar concretamente el contenido al cual se hace referencia.Las ilustraciones y animaciones dependen de los elementos antes mencionados mostrando la fluidez y la ideología de la universidad sin violentar su identidad y enfoque.

TIPOS de imágenes

FORMATO DE IMÁGENES

TIPOS DE IMÁGENES

FOTOGRAFÍAS REPRESENTATIVAS A LA

UNES.

VECTORES PLANOS REPRESENTADOS

POR LOS COLORES INSTITUCIONALES.

VECTORES PLANOS QUE RESPETAN LOS COLORES INSTITUCIONALES, USO

DE LAS TIPOGRAFÍAS PERMITIDAS.

VECTORES BASADOS EN SÍNTESIS GRÁFICAS.

19

Las dimensiones reflejadas en las imágenes son las adecuadas para su lectura y visualización. Dichas imágenes deben conservar el orden en el que se muestran.

110 X 104 px

95 X 95 px 95 X 95px 95X 95 px

DIMENSIONES

Dimensiones

FORMATO DE IMÁGENES

MENÚ DE ENCUENTROS /MÓDULOS

20

Dimensiones

FORMATO DE IMÁGENES

DIMENSIONES

190 X 117 px

PÁGINA PRINCIPAL

290 X 137px

290 X 137px

21

304 X 400 px 400 X 400 px

415 X 732 px

IMÁGENES DE APOYO DE CADA ACTIVIDAD.

Dimensiones

FORMATO DE IMÁGENES

22

ANIMACIONES SIMPLES USADAS COMO APOYO.

ANIMACIONES COMO COMPLEMENTO.

Denominamos animaciones básicas a las mostradas en formatos .Gif y .apng las cuales tienen corta duración, cuyo propósito es hacer énfasis y relación con el contenido que se esté estudiando.

ANIMACIONES BÁSICAS

FORMATO DE IMÁGENES

Animaciones básicas

23

Portal web CFVPORTAL WEB CFV

PORTAL WEB CFV

Diagramación

PORTAL WEB CFV

24

PORTAL WEB CFV

Diagramación

ANCHO DE CUERPO PRINCIPAL 1000px

LICENCIA 88 X 31px

590px

“BODY”

Diagramado a dos columnas.

Bajo la paleta de colores UNES.

Tipografías legibles

Menú

Dispositivo gráfico UNES.

slide fotográfico.

Menú.

P O R T A L W E B C F V

25

PORTAL WEB CFV

Diagramación

IMAGEN 950X350 px

IMAGEN 320X109px

IMAGEN 99X38px

410px

ANCHO DEL MONITOR

Como cintillo o “header” se ubica la coletilla del MINCI.

Aquí podemos apreciar que se aplican los mismos principios en uso de color, diagramación y utilización de imágenes especificadas anteriormente. >Puede visitar el presente portal dando clic a este enlace.

26

27

28