MANUALDE
VIRTUALIZACIÓN WEB 1
2
Í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.
3
4
INTRODUCCIÓN Introducción
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
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.
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.
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
5
LOGOS Logos utilizados
LOGO UNES (UNIVERSIDAD NACIONAL EXPERIMENTAL DE LA SEGURIDAD) >Consultar manual de identidad UNES. pรกgs. 8 a la 9 pรกgs.12 a la 21
LOGO GOBIERNO BOLIVARIANO DE VENEZUELA >Consultar manual de identidad. pรกgs. 1 a la 8
LOGO CFV (CENTRO DE FORMACIร N VIRTUAL)
Gobierno bolivariano Los elementos de identidad definidos para el logotipo del Gobierno Bolivariano de Venezuela se mantienen vigentes tal y como se verรก a continuaciรณn. Aquรญ se incorpora el ciclo de comunicaciรณn comprendido entre 2012-2013. >Consultar manual de identidad. pรกgs. 1 a la 8
6
CFV Al igual que el logo UNES, es un logo tipogrรกfico usando la misma fuente Myriad Pro. En su forma fraccionada el logo muestra 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 Centro de Formaciรณn Virtual.
LOGOS UTILIZADOS UNES El 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).
>Consultar manual de identidad UNES. pรกgs. 8 a la 9 pรกgs.12 a la 21
DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR Retícula Soporte Vertical en cada plataforma MOODLE.
AN
CH
OD
EC
UER
PO
PRI
NC
IPA
L 98
0px
DIAGRAMACIÓN
SOPORTE WEB
Y APLICACIÓN DE COLOR
AN
C
D HO
EC
U
O ERP
PRI
N
px 980 L A CIP
7
DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR 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 emblema UNES a su derecha.
Diagramado a tres columnas 235px
300px
445px
PÁGINA PRINCIPAL
Pie de página o“footer” identificado con el dispositivo gráfico del CFV y el emblema de la plataforma MOODLE.
ANCHO DE CUERPO PRINCIPAL 980px
COLOR 8
“BODY”
En cuanto al color aplicado en la plataforma web, sólo se aplican los permitidos en la gama de pantones referenciados en el manual de identidad UNES.
Te invitamos a visitar nuestra plataforma educativa http://cfv.unes.edu.ve:8081/docentes/
DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR color Paleta de identidad
>Consultar manual de identidad UNES. pág.11
Color Paleta de identidad Gama Primaria
Gama Secundaria / Acento
Gama Secundaria / Fondo
Colores del Logo
Gama Detalle (colores del logo)
9
DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR Retícula Soporte Vertical en cada plataforma MOODLE.
MENÚ DE ENCUENTROS /MÓDULOS
Como cintillo o´ “header” se ubica la coletilla del MINCI.
TAMAÑO DE BANNER PRINCIPAL 678 X 141px
Diagramado a dos columnas
ANCHO DE CUERPO 980px
TAMAÑO DE BANNER ETIQUETA 680 X 99px
BANNERS 10
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.
El banner etiqueta identifica el encuentro didáctico de cada proceso formativo en línea.
DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR Retícula Soporte Vertical en cada plataforma MOODLE. PÁGINA PRINCIPAL
TAMAÑO DE BANNER EXTERIOR 440 X 200px
CONTENEDOR DE ACTIVIDAD
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. Diagramado a dos columnas
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.
Banner interno le recuerda al usuario en qué unidad curricular se encuentra y va ubicado dentro de todas las actividades a realizar.
11
DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR Retícula Soporte Vertical en cada plataforma moodle.
CONTENEDOR DE ACTIVIDAD
TAMAÑO DE LICENCIA CREATIVE COMMONS 740 X 52px
LICENCIAS Las licencias Creative Commons es un conjunto de licencias de copyright (derechos de autor). Existen seis tipos de licencias, en nuestro caso usamos Reconocimiento-NoComercialCompartirIgual (CC-BY-NC-SA).
12
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.
HTML PLANTILLA
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.
DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR Retícula Soporte Vertical /Código HTML plantilla de contenidos.
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” width=”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 plantilla está estructurada de la siguiente manera: CUERPO BASE “CUERPOBASE”: Es el fondo o background que contiene a la platilla en general.
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 PA 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.
13
DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR Retícula Soporte Vertical /Código HTML plantilla de contenidos.
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 PLANTILLAS
PLANTILLA TIPO FORO La 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.
14
PLANTILLA TIPO PÁGINA WEB Esta 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”.
DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR Uso de tipografía Arial Regular (12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
USO DE TIPOGRAFÍA 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. >Consultar manual de identidad UNES. págs. 22 a la 24
TIPOGRAFÍA Familia Arial Texto de título y contenidos para formatos electrónicos
Arial Bold (12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Arial Bold Italic(12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Arial italic(12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Arial Regular (12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Arial Bold (12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Arial Bold Italic(12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
TIPOGRAFÍA Familia Calibri Texto de título y contenidos para formatos electrónicos
Arial italic(12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
15
DIAGRAMACIÓN SOPORTE WEB Y APLICACIÓN DE COLOR Uso de tipografía
Myriad Pro Regular (12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Myriad Pro Bold (12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Myriad Pro Bold Italic(12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Myriad Pro Ligth (12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Myriad Pro Condensed (12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Myriad Pro Condensed Bold (12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Myriad Pro Condensed Ligth (12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Myriad Pro Condensed italic(12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Myriad Pro Semi Extended (12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Myriad Pro Semi Extended Bold (12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Myriad Pro Semi Extended Ligth (12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Myriad Pro Semi Extended italic(12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Myriad Pro Ligth Italic(12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Myriad Pro italic(12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Myriad Pro Ligth Condensed Italic(12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Myriad Pro Bold Semi Extended Italic(12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Myriad Pro Ligth Semi Extended Italic(12pts) ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
USO DE TIPOGRAFÍA 16
TIPOGRAFÍA Familia Myriad Pro Texto de título y contenidos breves
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.
FORMATO DE IMÁGENES Formato de imágenes
FORMATO DE
IMÁGENES
LOS TAN E LAS E P S D E UE RES, USOS. L T I DA OS Q A N N A MI PL CIO RESNSTITU ÍAS PER O T V E CO R E S I O G R A F COL TIP
POR DOSS. A T ESEN ALE EPRTUCION R S I T NO PL A S INS RES OLORE O T VEC LOS C
O FOT
FÍA GRA
17
PR S REUN
FORMATO DE IMÁGENES TIPOS de imágenes
TIPOS DE IMÁGENES 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.
VECTORES PLANOS QUE RESPETAN LOS COLORES INSTITUCIONALES, USO DE LAS TIPOGRAFÍAS PERMITIDAS. VECTORES PLANOS REPRESENTADOS POR LOS COLORES INSTITUCIONALES.
VECTORES BASADOS EN SÍNTESIS GRÁFICAS.
18
FOTOGRAFÍAS REPRESENTATIVAS A LA UNES.
FORMATO DE IMÁGENES Dimensiones
MENÚ DE ENCUENTROS /MÓDULOS
110 X 104 px
95 X 95 px
DIMENSIONES
95 X 95px
95X 95 px
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.
19
FORMATO DE IMÁGENES Dimensiones
190 X 117 px
290 X 137px
PÁGINA PRINCIPAL
290 X 137px
DIMENSIONES 20
FORMATO DE IMÁGENES Dimensiones
IMÁGENES DE APOYO DE CADA ACTIVIDAD.
304 X 400 px
400 X 400 px
415 X 732 px
21
FORMATO DE IMÁGENES Animaciones básicas
ANIMACIONES SIMPLES USADAS COMO APOYO.
ANIMACIONES
BÁSICAS
ANIMACIONES COMO COMPLEMENTO.
22
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.
POR
TAL
FV
bC l we a t r Po
PORTAL WEB CFV Diagramaci贸n
PORTAL
WEB
CFV
23
PORTAL WEB CFV Diagramación Dispositivo gráfico UNES.
Menú.
slide fotográfico.
Bajo la paleta de colores UNES. Diagramado a dos columnas.
Tipografías legibles
Menú
590px LICENCIA 88 X 31px
ANCHO DE CUERPO PRINCIPAL 1000px “BODY”
P O R T A L W E B C F V 24
PORTAL WEB CFV Como cintillo o “header” se ubica la coletilla del MINCI.
Diagramación
IMAGEN 950X350 px
IMAGEN 320X109px
410px
IMAGEN 99X38px
ANCHO DEL MONITOR
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.
25
26
27
28