Manual-de-Identidad-Gráfica-y-de-Desarrollo-e-Identidad-Web.pdf

Manual de Identidad Gráfica y
de Desarrollo e Identidad
Web

1
ÍNDICE
INTRODUCCIÓN. ......................................................................................................... 2
OBJETIVO.................................................................................................................... 3
CONFIGURACIÓN BÁSICA............................................................................................ 4
INSTRUCTIVO:.......................................................................................................... 4
USO DE TÍTULO............................................................................................................ 5
USO DE FAVICON. ....................................................................................................... 5
USO DE LA PROPIEDAD OG: IMAGE. .............................................................................. 6
EJEMPLO BÁSICO...................................................................................................... 6
GAMA DE COLORES. ................................................................................................... 11
USO DE LOGOTIPOS/IMAGOTIPOS OFICIALES ..............................................................13
ESCUDOS OFICIALES. ..............................................................................................13
IMAGOTIPO Y COLORES AUTORIZADOS. ...................................................................14
TIPOGRAFÍA OFICIAL...................................................................................................16
ICONOGRAFÍA ...........................................................................................................17
MODO DE USO........................................................................................................17
BARRA DE NAVEGACIÓN (MENÚ) .................................................................................18
FORMULARIO: ........................................................................................................... 20
BOTONES. .................................................................................................................21
TAMAÑO DE BOTONES............................................................................................21
CUERPO DE TEXTO..................................................................................................... 22
TABLAS ..................................................................................................................... 22
Tablas con filas marcadas ......................................................................................... 22
Tablas con bordes ................................................................................................... 22
VENTANA MODAL...................................................................................................... 23
MODO DE USO....................................................................................................... 24
MEDIANTE DATA-ATTRIBUTES .............................................................................. 24
MEDIANTE JAVASCRIPT........................................................................................ 24
FOOTER O PIE DE PÁGINA........................................................................................... 25
WORDPRESS.............................................................................................................. 26

2
INTRODUCCIÓN.
Conforme a la integración del Plan Estatal de Desarrollo, bajo el cumplimiento del
mandato legal y normativo en materia de planeación de nuestra gestión
gubernamental, se determinan una serie de actividades para lograr lo planteado.
Es así que dentro del eje 1, Armonía, Paz y Reconciliación, conforme a las líneas de
acción 1.2.4 y 2.2.6, se establece la consolidación de un Gobierno abierto mediante el
uso intensivo de las tecnologías de la información y el propiciar una comunicación
inclusiva, eficaz, coordinada y transparente, es así que la Coordinación de
Comunicación Social, tiene como tarea el dotar de las herramientas necesarias a las
diversas dependencias y entidades para que la imagen del Gobierno del Estado
coadyuve al posicionamiento de sus obras y acciones; que sus sitios de internet estén
debidamente actualizados y contengan los datos estadísticos, de contacto y de
transparencia y sobre todo homologar la presentación de estos.
El presente Manual de Identidad Web establece las directrices y normas para el uso
consistente y coherente de la marca del Gobierno de Michoacán. Estas directrices
incluyen elementos como el logotipo, la paleta de colores, la tipografía y otros aspectos
visuales que se utilizan en la comunicación de la marca.
Al ser los sitios web gubernamentales una herramienta importante para que el gobierno
comunique información y servicios a los ciudadanos es esencial tener un manual de
identidad gráfica que homologue visual y estructuralmente los portales para hacerlos
accesibles, fáciles de navegar y útiles.
La marca del gobierno debe ser reconocible y coherente en todos los sitios web
gubernamentales para que los ciudadanos puedan identificar fácilmente la fuente de la
información y confiar en su veracidad.
Además, este manual de identidad ayuda a mejorar la accesibilidad y usabilidad de los
sitios web. Al estandarizar la presentación visual de la información, se puede mejorar la
navegación y la legibilidad de los contenidos, lo que a su vez puede mejorar la
experiencia del usuario y la satisfacción del ciudadano con el servicio.

3
OBJETIVO.
Con el objetivo de normar y mejorar la simplificación administrativa, estandarizando la
estructura de los contenidos de la imagen e identidad gráfica, en todos los Sistemas y
plataformas web de las Dependencias y entidades del Gobierno del Estado; se ha
desarrollado la herramienta CDN, para implementar, mejorar y agilizar la
estandarización, este documento, describe las series de elementos específicos que se
deben de cumplir al momento de realizar la maquetación de los trámites en línea.
Su aplicativo es conforme a lo estipulado en los artículos 17 y 22 de los Lineamientos
Generales en Materia de Comunicación Social para la Administración Pública del Estado
de Michoacán de Ocampo.
El Manual de Identidad Gráfica 2021-2027 del Gobierno del Estado, expone los
elementos visuales fundamentales que construyen la identidad gráfica del nuevo
Gobierno, sirviendo de guía para aplicar la imagen consistentemente en papelería,
materiales de difusión, publicitarios y para redes sociales, sitios en
https://www.michoacan.gob.mx, eventos, señalización y fachadas de inmuebles,
publicaciones editoriales, vestimenta, vehículos, entre otros.
La base gráfica sirve como referencia para organizar la información y la forma en la que
estará disponible en las páginas web, para facilitar a los usuarios, que accedan de
manera sencilla al contenido de estas.

4
CONFIGURACIÓN BÁSICA.
Este framework tiene la capacidad de insertar la cabecera y pie de página de
https://www.michoacan.gob.mx de manera dinámica. El único requisito para
lograr ese objetivo es ingresar una hoja de estilo y un javascript en todos los htmls que
lo requieran.
Es importante no descargar ningún archivo, se deben ocupar únicamente los alojados
en nuestro CDN, ya que estos podrán cambiar de manera constante y sin previo aviso.
INSTRUCTIVO:
Copie la ruta de la siguiente liga de nuestras hojas de estilos que se encontrará alojada
en nuestro CDN:
1. https://michoacan.gob.mx/cdn/css/bootstrap.min.css
2. https://michoacan.gob.mx/cdn/css/estilos.css
3. Antes de cerrarse la etiqueta <head> de cada html ingrese la ruta copiada de la hoja de
estilo de la siguiente forma:
<head>
<link rel="stylesheet"
href="https://michoacan.gob.mx/cdn/css/bootstrap.min.css">
<link rel="stylesheet" href="https://michoacan.gob.mx/cdn/css/estilos.css">
</head>
4. Antes del cierre de las etiquetas </body></html> copie la ruta de la siguiente liga de
nuestro archivo de javascript que se encontrará alojada en nuestro CDN:
<script src="https://www.michoacan.gob.mx/cdn/js/jquery-
3.6.0.min.js"></script>
<script src="https://www.michoacan.gob.mx/cdn/js/bootstrap.js"></script>
Esta guía ya incluye los siguientes frameworks y librerías y por lo tanto se recomienda
no agregarlos dentro de los htmls:
• Bootstrap: versión 5.2.0 Para más información consultar la documentación
• Jquery: versión 3.6.0 Para más información consultar la documentación.
• Gibson (fuente tipográfica).

5
USO DE TÍTULO.
Todas las páginas que utilicen la gráfica base deberán tener un título utilizando la
etiqueta <title> dentro de la etiqueta <head>.
<head>
...
<title>Ejemplo de nueva página para michoacan.gob.mx</title>
...
</head>
USO DE FAVICON.
Para incluir el favicon en las páginas, hay que agregar el siguiente código dentro de la etiqueta
<head>

<link rel="shortcut icon" href="https://michoacan.gob.mx/cdn/img/favicon/favicon.ico"
type="image/x-icon" />
<link rel="apple-touch-icon" href="https://michoacan.gob.mx/cdn/img/favicon/apple-
touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57"
href="https://michoacan.gob.mx/cdn/img/favicon/apple-touch-icon-57x57.png" />

6
USO DE LA PROPIEDAD OG: IMAGE.
Todas las páginas deberán contar con su meta etiquetada de propiedad "og:image", en
caso de no tener una imagen, se deberá usar la imagen alojada en el CDN
https://michoacan.gob.mx/cdn/img/michog.jpg
<meta property="og:image"
content="https://michoacan.gob.mx/images/michog.jpg"/>
EJEMPLO BÁSICO.
Este es el template básico para agregar una nueva página. Para que el framework funcione
correctamente se debe incorporar la liga de los estilos dentro de la etiqueta <head>, y la liga
del script antes de cerrarse la etiqueta <body>.
<!DOCTYPE html>
<html lang="es">
<head>
<title>TÍTULO DE LA PÁGINA</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=3.0, user-scalable=1" />
<meta name="description" content="Portal ciudadano del Gobierno del Estado de
Michoacán">
<meta name="keywords" content="gobierno, michoacan, portal, sitio web, dependencia
michoacan, cgcs, comunicacion social">
<meta name="author" content="Coordinación General de Comunicación Social">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=9"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Michoacán">
<meta name="twitter:card" value="summary">
<meta property="og:title" content="TÍTULO DE LA PÁGINA" />
<meta property="og:image" content="https://michoacan.gob.mx/images/michog.jpg"/>
<meta property="og:description" content="DESCRIPCIÓN DE LA PÁGINA" />

<link href="https://michoacan.gob.mx/cdn/css/bootstrap.min.css" rel="stylesheet">

7
<link href="https://michoacan.gob.mx/cdn/css/estilos.css?ver=1.00" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.4/css/all.min.css">

<link rel="shortcut icon" href="https://michoacan.gob.mx/cdn/img/favicon/favicon.ico"
type="image/x-icon" />
<link rel="apple-touch-icon" href="https://michoacan.gob.mx/cdn/img/favicon/apple-
touch-icon.png" />
</head>
<body class="body-wrapper">
<nav class="navbar main-nav fixed-top navbar-expand-lg" style="border-bottom: 5px solid
#FFC3D0;">
<div class="container-fluid">
<a class="navbar-brand" href="http://localhost/michoacan.gob.mx">
<img src="https://michoacan.gob.mx/cdn/img/logo.svg" height="85px;" alt="logo">
</a>
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-
bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">

8
<li class="nav-item">
<a class="nav-link" href="index.html">MENU 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="link" data-
bs-toggle="dropdown" aria-expanded="false">
MENU 2
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="" target="_blank"
role="link">Submenu1</a></li>
</ul>
</li>
<li class="nav-item linkancla">
<a class="nav-link ancla" href="#contacto">MENU 3</a>
</li>
<a class="nav-link" href="https://www.facebook.com/gobmichoacan"
target="_blank"><i class="fab fa-facebook-f"></i></a>
</li>
<a class="nav-link" href="https://twitter.com/GobMichoacan" target="_blank"><i
class="fab fa-twitter"></i></a>
</li>
<a class="nav-link" href='#search'>
<em class="fa fa-search"></em>
</a>
</li>
</ul>
</div>
</div>
</nav>


<footer>
<div class="container footer-main">

9
<div class="row">
<div class="col-lg-4 text-center">
<div class="footer-logo">
<img src="https://michoacan.gob.mx/images/logo-gris.png" class="logoFooter"
alt="footer-logo">
</div>
</div>

<ul class="social-icons list-inline">
<li class="list-inline-item">
<br>
<a href="https://twitter.com/GobMichoacan" target="_blank"><i class="fab fa-2x fa-
twitter"></i></a>  
</li>
<br>
<a href="https://www.facebook.com/gobmichoacan/" target="_blank"><i
class="fab fa-2x fa-facebook"></i></a>  
</li>
<br>
<a href="https://www.instagram.com/gobmichoacan/?hl=es" target="_blank"><i
class="fab fa-2x fa-instagram"></i></a>  
</li>
<br>
<a href="https://t.me/GobiernodeMichoacan" target="_blank"><i class="fab fa-2x fa-
telegram-plane"></i></a>  
</li>
<br>
<a href="https://open.spotify.com/user/rr3zgtpveoxmy02i5t9bj9l7z"
target="_blank"><i class="fab fa-2x fa-spotify"></i></a>  
</li>
</ul>

<a href="http://smo.michoacan.gob.mx">Correo institucional</a><br>

10
<a href="https://www.michoacan.gob.mx/aviso-de-privacidad/">Aviso de
privacidad</a> <br>
</div>
<br>
<h4 class="texto-gris">#HonestidadyTrabajo</h4>
</div>
<div class="col-12">
<hr>
</div>
<div class="col-12 text-center">
© Desarrollado por la Coordinación General de Comunicación Social | <b class="texto-
guinda">Gobierno del Estado de Michoacán 2023</b>
</div>
</div>
</div>
<div class="container-fluid footer-pleca">
<div class="row">
<div class="col">
<br><br>
</div>
</div>
</div>
</footer>

<script src="https://www.michoacan.gob.mx/cdn/js/jquery-3.6.0.min.js"></script>
<script src="https://www.michoacan.gob.mx/cdn/js/bootstrap.js"></script>

11
GAMA DE COLORES.
Los colores aquí especificados son los que deberán utilizarse en el contenido. El cuerpo
de texto dentro de los documentos con fondo blanco deberá ir en guinda #4A001F.
En caso de que el fondo sea de color guinda, los textos deberán ir en color blanco #ffffff
o rosa claro #FFC4D0
Puedes hacer uso de los colores a través de las propiedades CSS ya definidas en la hoja
de estilos.
Usando las clases
1. Class=”texto-guinda”
2. Class=”texto-rosa-claro”
3. Class=”texto-morado”
4. Class=”texto-gris”
O con dentro de los CSS:
• color: var(--guinda)
• color: var(--rosa-claro)
• color: var(--morado)
• color: var(--gris)

12
También puedes hacer uso de los colores para utilizarlos en fondo con la propiedad
background-color.
Usando las clases
5. Class=”fondo-guinda”
6. Class=”fondo-rosa-claro”
7. Class=”fondo-morado”
8. Class=”fondo-gris”
O con dentro de los CSS:
• Background-color: var(--guinda)
• Background-color: var(--rosa-claro)
• Background-color: var(--morado)
• Background-color: var(--gris)

13
USO DE LOGOTIPOS/IMAGOTIPOS OFICIALES
Los logotipos de cada secretaría o dependencia se deberán de colorar en la parte
superior a izquierda.
Cada logotipo deberá tener un máximo proporcional de preferencia de 85px de alto.
ESCUDOS OFICIALES.

14
IMAGOTIPO Y COLORES AUTORIZADOS.

15
Para hacer uso del logotipo oficial del Gobierno del Estado, se tendrá que llamar desde
nuestro CDN con las siguientes rutas:
https://michoacan.gob.mx/cdn/img/logo.svg
https://michoacan.gob.mx/cdn/img/logo.png
https://michoacan.gob.mx/cdn/img/logo-gris.svg
https://michoacan.gob.mx/cdn/img/logo-gris.png
https://michoacan.gob.mx/cdn/img/logo-blanco.svg
https://michoacan.gob.mx/cdn/img/logo-blanco.png
Es importante siempre llamar al logotipo desde nuestro CDN, con el fin de evitar hacer
uso de logos no autorizados, modificados o incorrectos.
En el caso de logotipos de las dependencias del gobierno de Michoacán, se
encontrarán en la ruta:
https://michoacan.gob.mx/cdn/img/logos/dependencias/
Al final de la ruta, será necesario agregar las siglas, abreviatura o nombre corto de las
dependencias, por ejemplo:
https://michoacan.gob.mx/cdn/img/logos/dependencias/sectur.svg
https://michoacan.gob.mx/cdn/img/logos/dependencias/secoem.svg
Si no se encontrará el logo de la dependencia o alguna otra versión del logo (vertical,
blanco, jpg), será necesario hacer la solicitud por oficio a la Coordinación General de
Comunicación Social.

16
TIPOGRAFÍA OFICIAL.
El nombre de la tipografía oficial es Gibson y se puede descargar desde el siguiente link:
https://drive.google.com/drive/folders/1hDD1sj4DjGKmRt7zOOytGFMiD
mVADn3K?usp=share_link
Y para su uso en web se debe referenciar al CDN:
@font-face {
font-family: Gibson;
src: url(https://michoacan.gob.mx/cdn/fonts/gibson-regular-webfont.woff);
font-weight: normal;
}
https://michoacan.gob.mx/cdn/fonts/

17
ICONOGRAFÍA
Se puede hacer uso de la librería de fuentes e iconos basados en CSS llamada Fontawesome
(opcional).
MODO DE USO
Se importa la librería dentro de la etiqueta <head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.4/css/all.min.css">
Se accede a los iconos con el código:
<i class="fa-solid fa-magnifying-glass-plus"></i>
Puedes acceder a la documentación e iconos oficiales en https://fontawesome.com

18
BARRA DE NAVEGACIÓN (MENÚ)
La barra de navegación es un componente contendrá el menú principal del sitio. En vistas de
móviles están expandidos, y se vuelven horizontales cuando aumenta el ancho de la ventanilla
disponible.
En caso de utilizar, se deberá de crear justo después de que se haya abierto la etiqueta <body>
<nav class="navbar main-nav fixed-top navbar-expand-lg" style="border-bottom: 5px solid
#FFC3D0;">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="https://michoacan.gob.mx/cdn/img/logo.svg" height="85px;" alt="logo">
</a>
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-
bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<a class="nav-link" href="index.html">MENU 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="link" data-
bs-toggle="dropdown" aria-expanded="false">
MENU 2
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
</ul>
</li>
<li class="nav-item linkancla">
<a class="nav-link ancla" href="#contacto">MENU 3</a>
</li>

19
<a class="nav-link" href="https://www.facebook.com/gobmichoacan"
target="_blank"><i class="fab fa-facebook-f"></i></a>
</li>
<a class="nav-link" href="https://twitter.com/GobMichoacan" target="_blank"><i
class="fab fa-twitter"></i></a>
</li>
<a class="nav-link" href='#search'>
<em class="fa fa-search"></em>
</a>
</li>
</ul>
</div>
</div>
</nav>
Cualquier etiqueta posterior a este código del menú, deberá llevar la clase padding-menu-
principal o agregar manualmente un padding-top 140px para evitar que el
contenido se quede abajo del menú, ya que se encuentra con la propiedad fixed.
<section class="padding-menu-principal"> <!—todo el
código debe ir aquí -->
</section>

20
FORMULARIO:
Los controles de formularios individuales reciben automáticamente algunos estilos
globales. Todos los elementos <input>, <textarea> y <select> con la clase. form-
control se componen de un ancho de 100% de forma predeterminada. Para un
espaciado más óptimo se deben envolver las etiquetas y los controles con la clase. form-
group.
<form role="form">
<div class="form-group">
<label class="control-label" for="email-01">Correo electrónico:</label>
<input class="form-control" id="email-01" placeholder="Correo electrónico"
type="text">
</div>
<label class="control-label" for="password-01">Contraseña</label>
<input class="form-control" id="password-01" placeholder="Contraseña"
type="password">
</div>
<label class="control-label" for="file-01">Cargar archivo:</label>
<input id="file-01" type="file">
</div>
<div class="checkbox">
<label>
<input type="checkbox">
Acepto los términos
</label>
</div>
<textarea class="form-control" rows="3"></textarea>
</div>
<button class="btn btn-primary pull-right" type="submit">Enviar</button>
</form>

21
BOTONES.
Utilice cualquiera de las clases de botones disponibles para crear rápidamente un botón
con estilo, los cuales tienen que ir alineadas a la derecha justo donde termina el campo.

<button type="button" class="btn btn-primary">Primario</button>

<button type="button" class="btn btn-secondary">Secundario</button>

<button type="button" class="btn btn-default">default</button>
TAMAÑO DE BOTONES.
Aquí se detalla los diferentes tamaños que tienen los botones.
Agrega la clase .btn-lg, .btn-sm, o .btn-xs para modificar el tamaño del botón.

<button type="button" class="btn btn-primary btn-lg">Primario btn-lg</button>

<button type="button" class="btn btn-primary">Primario</button>

<button type="button" class="btn btn-primary btn-sm">Primario btn-sm</button>

<button type="button" class="btn btn-primary btn-xs">Primario btn-xs</button>

22
CUERPO DE TEXTO
El tamaño de fuente estandarizado es de 18px. El tamaño mínimo recomendable para el
texto es de 16px.
TABLAS
Para el relleno básico estilo-luz y sólo divisores horizontales se debe añadir la clase base.
table a cualquier tabla.
<table class="table">
...
</table>
Tablas con filas marcadas
<table class="table table-striped">
...
</table>
Tablas con bordes
<table class="table table-bordered">
...
</table>
Template para Wordpress
En caso de que el desarrollo este realizando en Wordpress, se comparten los archivos
header.php y footer.php que deberán ser integrados en el Template.

23
VENTANA MODAL
Las ventanas modales son indicaciones de diálogo flexibles y dinámicas que permiten
mostrar información sobre todas las demás ventanas de la misma aplicación.
<div class="modal modal-fullscreen fade show" id="exampleModal" tabindex="-1"
role="dialog" aria-labelledby="exampleModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-bs-dismiss="modal" aria-
label="Close"><span aria-hidden="true">×</span></button>
<h2 class="texto-guinda modal-title" style="margin-bottom: 0 !important;">Título
del Modal</h2>
</div>
<div class="modal-body">
<p class="texto-guinda">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus et delectus quod
asperiores, atque maxime numquam saepe distinctio ipsum laboriosam at corrupti
doloribus officia aut ipsa, quos. Perferendis, eius, voluptatibus. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Praesentium quia saepe doloribus nesciunt expedita
enim ratione repellat exercitationem consequuntur repellendus, assumenda id quod?
Sequi reiciendis, quidem! Rem vel quas laborum.
</p>
<p class="texto-guinda">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus et delectus quod
asperiores, atque maxime numquam saepe distinctio ipsum laboriosam at corrupti
doloribus officia aut ipsa, quos. Perferendis, eius, voluptatibus. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Praesentium quia saepe doloribus nesciunt expedita
enim ratione repellat exercitationem consequuntur repellendus, assumenda id quod?
Sequi reiciendis, quidem! Rem vel quas laborum.
</p>
<div class="modal-footer">

24
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary">Guardar</button>
</div
</div>
</div>
</div>
</div>
MODO DE USO.
MEDIANTE DATA-ATTRIBUTES
Se pueden activar ventanas modales sin tener que escribir una línea individual de
javascript mediante etiquetas. Se debe establecer data-toggle="modal" en un
elemento controlador, como botón, así como data-target="#foo" o href="#foo" para
apuntar a un modal en específico para alternar.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-
target="#exampleModal">Abrir Modal</button>
MEDIANTE JAVASCRIPT
El siguiente ejemplo llamará a una ventana modal con un id de myModal con la siguiente
línea de Javascript.
$('#myModal').modal(options)
Para más información leer la siguiente documentación: Bootstrap Javascript modals.

25
FOOTER O PIE DE PÁGINA
Todas las páginas deben tener la siguiente estructura en su footer o pie de página:
En el lado izquierdo deberá ir imago tipo del Gobierno del Estado de Michoacán en
horizontal color gris.
https://michoacan.gob.mx/cdn/img/logo-gris.svg
https://michoacan.gob.mx/cdn/img/logo-gris.png
En la parte central los iconos de las redes sociales de la dependencia o en caso de no
tener del gobierno del Estado de Michoacán.
Y a la derecha deberá ir el Hashtag oficial del Gobierno del Estado que es
#HonestidadyTrabajo
Debajo de estos tres elementos de manera opcional puede ir la leyenda de Copyright,
fecha y entidad o dependencia que la desarrolló.
Finalmente, de manera opcional también puede ir un rectángulo en color Guinda.

26
WORDPRESS
Si el desarrollo web se hace con el CMS de Wordpress, ponemos a disposición el
template completo.
Adicionalmente se puede incrustar únicamente el header.php y footer.php en el
template actualmente usado.
Link del template: https://drive.google.com/drive/folders/1XuBgK8KD-
JZ25CiYVZ9KANnMk3BRTL3J?usp=share_link
Puedes consultar esta guía gráfica en:
https://www.michoacan.gob.mx/guia-grafica/

Manual-de-Identidad-Gráfica-y-de-Desarrollo-e-Identidad-Web.pdf

Recomendados

Recomendados

Más contenido relacionado

Similar a Manual-de-Identidad-Gráfica-y-de-Desarrollo-e-Identidad-Web.pdf

Similar a Manual-de-Identidad-Gráfica-y-de-Desarrollo-e-Identidad-Web.pdf (20)

Último

Último (20)

Manual-de-Identidad-Gráfica-y-de-Desarrollo-e-Identidad-Web.pdf