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
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 2/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 3/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
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 4/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 5/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 6/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 7/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 8/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 9/35
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.
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 10/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 11/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 12/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 13/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 14/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 15/35
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
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 16/35
15
Guía de estilo para sitios web 2014
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.
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 17/35
Guía de estilo para sitios web 2014
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.
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 18/35
G í d il i i b 2014
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 19/35
Guía de estilo para sitios web 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:
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 20/35
Guía de estilo para sitios web 2014
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 21/35
Guía de estilo para sitios web 2014
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
Título nivel 2 (H2)
° Fuentes: Noticia Text, serif ° Tamaño: 27px ° Altura de línea: 1.2em
Título nivel 3 (H3)
° Fuentes: Noticia Text, serif ° Tamaño: 22px ° Altura de línea: 1.2em
Título nivel 4 (H4)
° Fuentes: Open sans, Lucida grande, Tahoma, Verdana, Arial,sans-serif ° Tamaño: 18px ° Altura de línea: 1.6em
Guía de estilo para sitios web 2014
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 22/35
21
Guía de estilo para sitios web 2014
Título nivel 5 (H5)
° Fuentes: Open sans, Lucida grande,Tahoma, Verdana, Arial, sans-serif ° Tamaño: 14px ° Altura de línea: 1.6em
Título nivel 6 (H6)
° 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
Guía de estilo para sitios web 2014
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 23/35
Guía de estilo para sitios web 2014
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.
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 24/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 25/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 26/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 27/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 28/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 29/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 30/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 31/35
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 32/35
Guía de estilo para sitios web 2014
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 33/35
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
8/16/2019 Udg Modelo Web Guia de Estilos 2014 0
http://slidepdf.com/reader/full/udg-modelo-web-guia-de-estilos-2014-0 34/35
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.
Top Related