Udg Modelo Web Guia de Estilos 2014 0

8/16/2019 Udg Modelo Web Guia de Estilos 2014 0

http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 1/35





Autor:Mtro. Marco Antonio Sierra Gallardo

Ilustradores:L.D.C.G. Angie Fernández Olimón

L.D.C.G. Omar Cárdenas López José Gerardo García Mercado

Primera edición, 2014Derechos reservados © 2014 Universidad de Guadalajara

Coordinación General de Tecnologías de InformaciónAv. Juárez 976, Piso 2, Col. Centro, C.P. 44100

Guadalajara, Jalisco, México

ISBN: 978-607-450-932-8

Hecho en México













Identidad gráfica para

el Web

Consolidar una identidad gráca común en los sitios web es uno de

los objetivos esenciales en el Modelo Web. Con el uso sistematizadode elementos grácos tales como imágenes, colores, retículas y

tipografía se busca obtener una presentación agradable y ayudar ala difusión efectiva de las ideas e información a las personas queutilizan los sitios web universitarios.

El empleo de una identidad gráca consistente ayuda a entender la

estructura y organización de una institución.

Si utilizamos una analogía deportiva es como el caso de un equipode futbol: cada integrante del equipo, jugadores, cuerpo técnico yasistentes viste de forma que es fácil identicar cuál es su función en

el equipo.

Para alcanzar estos objetivos se denió una estrategia a seguir que

consiste en el uso de una retícula de composición común para todoslos sitios web y con el uso de una gama cromática es identicada

cada dependencia, sistema educativo y centro universitario.













Guía de estilo para sitios web 2014

14

Ubicación del tema DRUDG 7

El tema que se emplea en los sitios web universitarios viene incluido en la copia de distribución para los sitios web universitarios. Los archivosque componen el tema DRUDG 7 se encuentran ubicados en el siguiente directorio donde se encuentra instalado Drupal:/sites/all/themes/drudg7.Para conocer más acerca del tema en Omega 3, https://drupal.org/node/1768696



15


Estructura de la página de

DRUDG 7 Por defecto Drupal 7 tiene 3 secciones principales que se llamanEncabezado, Contenido y Pie de página, cada una de ellas tienezonas que a su vez contienen regiones en donde se puede colocar elcontenido.

A continuación se explica el uso de cada una de ellas.

Sección EncabezadoZona User

° Región User Bar First.#region-user-bar-rst , 8 columnas

Para uso exclusivo del escudo y leyenda de la Universidad deGuadalajara.

° Región User Bar Second

#region-user-bar-second , 4 columnasPara uso exclusivo del buscador del sitio.

Zona Branding

° Región Branding#region-branding , 12 columnas

Para uso exclusivo del encabezado principal del sitio web.

Zona Menú

° Región Menú#region-menu , 12 columnas

Para uso exclusivo del menú principal del sitio web.

Zona Header

° Región Header First#region-header-rst , 6 columnas

Pueden colocarse bloques que se muestran antes del contenidoprincipal, pero que sólo abarquen la mitad de la pantalla.

° Región Header Second#region- header-second, 6 columnas

Pueden colocarse bloques que se muestran antes del contenidoprincipal, pero que sólo abarquen la mitad de la pantalla.




16

Sección Contenido

Zona Preface

° Región Preface First#region-preface-rst , 12 columnas

Pueden colocarse bloques que se muestran antes del contenidoprincipal.

Zona Content

° Región Sidebar First#region-sidebar-rst , 3 columnas

Pueden colocarse bloques que se mostrarán en la columnaizquierda, como fotografías o contenido multimedia

° Región Contenido#region-content , 6 columnas

Pueden colocarse bloques que se mostrarán antes delcontenido principal de la página.

° Región Sidebar Second#region-sidebar-second , 3 columnas

Pueden colocarse bloques que se mostrarán en la columna derecha,como menús y anuncios.

Sección Pie de Pagina

Zona Footer

° Región Footer First#region-footer-rst , 12 columnas

Pueden colocarse bloques que se mostrarán después del contenidoprincipal.

° Región Footer Second#region-footer-second , 12 columnas

Este espacio está reservado para mostrar la rma del sitio web, con

los datos de la dependencia, los menús primarios y secundarios yla información de créditos y políticas del sitio.



G í d il i i b 2014




18

En el encabezado

Es el primer uso visible del escudo en el sitio web, ubicado en la partesuperior derecha. En Drupal 7 el archivo está en la región User Bar

First y se puede encontrar en el bloque bloque_logo_udg.

Se muestra el escudo a color con el texto Universidad de Guadalajaray la leyenda “Red Universitaria de Jalisco” en altas y bajas justicada

al centro; deberá mostrarse sobre fondo blanco.

Sus dimensiones son 350 x 82 pixeles.

En la firma del sitio

En la parte inferior de la página se incluye la información de contactoinstitucional de la dependencia, que se emplea como identicación y

modo de contacto con la dependencia. El uso del escudo es en grises,con la leyenda “Red Universitaria de Jalisco” en altas y bajas justicada

a la izquierda; la información que debe incluirse es la siguiente:

° Nombre completo de la dependencia o centrouniversitario al que está adscrita la entidad que rma el sitio web.

° Nombre completo de la dependencia que rma el sitio web

° Nombre de la subdependencia o departamento (si es el caso) ° Dirección, número, colonia, código postal, ciudad, estado y país. ° Teléfono de contacto: Lada internacional +(Clave lada de ciudad) + teléfono + extensión.Ejemplo: 01 (52) 33 3134 2221 extensión 00000

Uso del escudo

El escudo de la Universidad de Guadalajara es el elemento más importante dentro del diseño de los sitios web universitarios por este motivosu uso debe ser cuidado, para no debilitar la imagen de la institución.Para su uso se tendrá en cuenta las disposiciones que están descritas en el Manual de Identidad Institucional disponible en http://www.identidadinstitucional.udg.mxEn la plantilla del tema DRUDG 7, el escudo siempre estará presente en el encabezado del sitio y en la rma del sitio y no podrá ser sustituido

o combinado con otro símbolo o logotipo. Estas son sus características:







20

Tipografía

Asegurarse que la información sea legible debe ser uno de los

objetivos de cualquier sitio web universitario. Debido a que losvisitantes del sitio leerán la información en una pantalla se tendráque tomar algunas consideraciones para hacer más cómoda laexperiencia.

Debe tenerse en cuenta que del formato que tenga el documentoweb dependerá la forma en que los sistemas informáticos —como por ejemplo los motores de búsqueda— interpreten y valorenla información; es por este motivo que se recomienda el uso deetiquetas HTML para determinar la jerarquía del texto.

Los sitios web universitarios deberán emplear los siguientes estilospara el texto en la página web.

Párrafos y listas

° Fuentes: Open sans, Lucida grande, Tahoma, Verdana, Arial, sans-serif ° Tamaño: 13px ° Altura de línea: 1.6em

Párrafo texto pequeño permitido

° Fuentes: Open sans, Lucida grande, Tahoma, Verdana, Arial, sans-serif ° Tamaño: 11px ° Altura de línea: 1.6em

Título nivel 1 (H1)

° Fuentes: Noticia Text, serif ° Tamaño: 30px ° Altura de línea: 1.2em






° Fuentes: Open sans, Lucida grande, Tahoma, Verdana, Arial,sans-serif ° Tamaño: 18px ° Altura de línea: 1.6em




21



° Fuentes: Open sans, Lucida grande,Tahoma, Verdana, Arial, sans-serif ° Tamaño: 14px ° Altura de línea: 1.6em


° Fuentes: Open sans, Lucida grande,Tahoma, Verdana, Arial, sans-serif ° Tamaño: 13px ° Altura de línea: 1.6em

Encabezado del sitio

° Fuentes: Open sans, Lucida grande,Tahoma, Verdana, Arial, sans-serif ° Tamaño: 36px

Open sans

Lucida grande

Noticia Text

Tahoma

Arial

Verdana

Sans-serif





22

Banners

Utilizados para la promoción de servicios, actividades próximas,secciones u otros sitios de interés, los banners pueden ser utilizadosen diferentes partes del sitio.Debido a que los banners pueden ser compartidos entre los sitiosweb universitarios se denieron los siguientes tipos de banner:

Anuncios de tipo carrusel

Slideshow

° Medidas: 960 x 190 pixeles ° Ubicación: Contenido. ° Bloque que lo muestra: Slideshow > Slideshow Principal. ° Observaciones: Este tipo de anuncio permite agregar un renglónde texto que se muestra en la parte de abajo del anuncio. Tambiénse escala dependiendo del espacio disponible.

Anuncios de tipo fijo

Banner

° Medidas: 260 x 90 pixeles ° Ubicación: Regiones Sidebar Second y Footer First. ° Bloque que lo muestra: Banner > Banner lateral derecho yBanner inferior.

Minibanner

° Medidas: 110 x 38 pixeles ° Ubicación: Regiones Sidebar Second. ° Bloque que lo muestra: Banner > Bloque Mini banner.

EVITAR

» Agregar anuncios en la zona de encabezado. » Uso innecesario del escudo oficial en elbanner para evitar su repetición.

» Modificar las dimensiones de los banners. » Emplear imágenes sin tener derechos de uso.






















32

Créditos

° Mtro. Itzcóatl Tonatiuh Bravo PadillaRector General

° Dr. Miguel Ángel Navarro NavarroVicerrector Ejecutivo

° Dr. Luis Alberto Gutierrez Díaz de LeónCoordinador General de Tecnologías de Información

Modelo Web de la Universidad de Guadalajara

° Mtro. José Gpe. Morales Montelongo

Coordinador de Desarrollo ° Mtra. Beatriz Veliz Plascencia Jefa de la Unidad de Desarrollo y Apoyo a Sistemas de Gestión ° LDCG Felipe Neville CalixtoDiseño y diagramación

° Mtro. Marco Antonio Sierra GallardoArquitectura de información y documentación del Modelo

° Lic. Juan de León TorresDesarrollo

° Lic. Oscar Daniel Alvarado Delgado

Desarrollo ° Lic. Gustavo Adolfo Ogas ÁvilaDesarrollo

° LDCG Omar Cárdenas LópezDiseño

° LDI Silvana Cecilia Sochi Marchini

Diseño ° LDCG Angie Fernández OlimónDiseño

Contenidos

° Mtro. Marco Antonio Sierra Gallardo ° Ing. Luz María Virgen AguilarRevisión de estilo

Diseño editorial

° LDCG Angie Fernández OlimónDiseño y diagramación

° José Gerardo García MercadoDiseño

° LDCG Omar Cárdenas LópezDiseño



Guía de Estilo para Sitios Web Universitarios 2014se terminó de editar en enero de 2014

en los talleres deMoti Soluciones impresas S. A. de C. V.

Calle 8 No. 2566Zona Industrial, Guadalajara, Jalisco, México.



Documents

Udg Modelo Web Guia de Estilos 2014 0