Guia Edomex
Objetivo
________________________________________
Con el objetivo de estandarizar la estructura de los contenidos en las dependencias del Gobierno del Estado de México, se ha realizado el siguiente documento, que funciona como una guía compuesta por un conjunto de elementos específicos los cuales le darán forma y organización a la información en la que esta estará disponible, para facilitar al ciudadano el acceso al contenido que solicite.
Esta guía incluye los siguientes frameworks y librerías por lo que se recomienda utilizar las versiónes a continuación mencionadas:
• Jquery versión 1.11.2. Para más información consultar la documentación.
• Bootstrap versión 3.3.6 Para más información consultar la documentación.
• Roboto (Regular, Medium, Light, Italic) (fuente tipográfica). Para más información consultar documentación.
Configuración básica
________________________________________
La forma en la que se integran estos frameworks es la siguiente.
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.
1. Llamada de Jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
2. Llamada de CSS Bootstrap :
<link rel="stylesheet; src='http://dgsei.edomex.gob.mx/recursos/librerias/bootstrap/css/bootstrap.min.css">
3. Llamada de JS Bootstrap :
<script src="http://dgsei.edomex.gob.mx/recursos/librerias/bootstrap/css/bootstrap.min.css"></script>
Para fines de Desarrollo se recomienda llamar en su lugar (bootstrap.css y bootstrap.js) que son la versión expandida de los mismos lo cual facilita su lectura y revisión, pero para puesta en producción y por cuestión de rendimiento deberán ser utilizadas las versiones minificadas.
Llamada a favicon
4.-Al final de las llamadas anteriores es importante agregar la hoja de estilos del Estado de México la cual encontraran en la siguiente dirección junto con sus recursos tipográficos: http://dgsei.edomex.gob.mx/recursos/css/edomex.css Se llamada de la siguiente manera: <link href="http://dgsei.edomex.gob.mx/recursos/css/edomex.css" rel="stylesheet"> Importante: la hoja de estilos edomex.css no deberá ser modificada de manera local sin la autorización del Departamento de Mercadotecnia y Diseño de Portales. Cualquier cambio en el código del CSS implicará modificaciones en el desarrollo o sitio web que se encuentre editando en cuestión. <title>Portal del Gobierno del Estado de México</title>
...
</head>
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>.
<html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Portal de Gobierno del Estado de México</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <link href=”http://dgsei.edomex.gob.mx/recursos/librerias/bootstrap/css/bootstrap.min.css“ rel="stylesheet"> <script type="text/javascript" src="http://dgsei.edomex.gob.mx/recursos/librerias/bootstrap/js/bootstrap.min.js”> <link href="http://dgsei.edomex.gob.mx/recursos/css/edomex.css" rel="stylesheet"> </head> <body> <!-- Contenido --> <div class="container">...</div> </body> </html>
Uso de favicon
Descargar las imágenes favicon aquí y agregar el archivo favicon.ico en el directorio raíz de la aplicación. Posteriormente se deberá vincular la imagen utilizando la etiqueta <link> dentro de la etiqueta <head>.
<head>
<link src='http://dgsei.edomex.gob.mx/recursos/favicon/favicon.ico">
Formulario
________________________________________
Los controles de formularios reciben automáticamente algunos estilos globales al ncluir bootstrap por lo que todos los elemento <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 .
Vista Previa
Código de Elemento
<a href=http://edomex.gob.mx>Portal Ciudadano del Estado de México</a>
Descripción
El elemento anchor (<a>) define un vínculo, el punto de destino de un vínculo o ambos.
Los atributos principales de este elemento son:
|
Atributo |
Valor |
Descripción |
|
href |
URL |
Especifica la URL del elemento al que se quiere vincular |
|
target |
_blank |
Especifica donde se abrirá el documento vinculado en esa URL |
Vista Previa
Código de Ejemplo
<h1>Gobierno del Estado de México</h1> <h2>Gobierno del Estado de México</h2> <h3>Gobierno del Estado de México</h3> <h4>Gobierno del Estado de México</h4> <h5>Gobierno del Estado de México</h5> <h6>Gobierno del Estado de México</h6>
Descripción Crea un encabezado o título de primer nivel para una sección del sitio.
Vista Previa
Código de Ejemplo
<header> <h1>Gobierno del Estado de México</h1> </header>
Descripción
Puede contener algunos elementos de encabezado, pero también otros elementos como un logo, elementos de navegación, una formulario de búsqueda o elementos similares, en el caso de la vista previa al ser un elemento contenedor y no tener representación sin algún elemento interno se indico con márgenes de color.
Vista Previa
Código de Ejemplo
<hr style="border-style: solid; border-color: #ff0000 #0000ff;"><br> Gobierno del Estado de México
Descripción
Crea una línea de separación horizontal, en el caso de la vista previa se colocó texto en la parte para ilustrar el separador.
Vista Previa
Código de Ejemplo
<p>El portal de internet del Gobierno del Estado de México es resultado del esfuerzo conjunto de las diferentes áreas gubernamentales, las cuales son responsables de la información que se publica, en los temas que le competen.</p>
Descripción
Este elemento permite definir un párrafo de texto y darle forma al texto contenido dentro de el.
Vista Previa
Código de Ejemplo
<p>Lista ordenada</p>
<ol>
<li>Estado</li>
<li>Gobierno</li>
<li>Infraestructura</li>
</ol>
<p>Lista desordenada</p>
<ul>
<li>Estado</li>
<li>Gobierno</li>
<li>Infraestructura</li>
</ul>
Descripción
Con cualquiera de estos elementos se puede definir una lista, el primero creara una lista ordenada(representada por números en orden secuencial), el segundo creara una lista desordenada (representada por viñetas).
El elemento li es el que indica cada uno de los punto de una lista ya sea ordenada o desordenada.
Vista Previa
Código de Ejemplo
<blockquote>El portal de internet del Gobierno del Estado de México es resultado del esfuerzo conjunto de las diferentes áreas gubernamentales, las cuales son responsables de la información que se publica, en los temas que le competen.</blockquote>
Descripción
Crea citas en bloque, marcando las citas a autores o documentos.
Vista Previa
Código de Ejemplo
<img alt="" src="/sites/dgsei.edomex.gob.mx/files/images/01.jpg" />
Descripción
Esta etiqueta permite referenciar gráficamente una imagen.
|
Atributo |
Valor |
Descripción |
|
alt /title |
Texto |
Especifica un texto alternativo para la imagen |
|
pixeles |
Asigna el alto al cual se representara la imagen, en caso de no asignarse toma el tamaño real de la imagen |
|
|
URL |
Especifica la URL de la imagen a visualizarse |
|
|
pixeles |
Asigna el alto al cual se representara la imagen, en caso de no asignarse toma el ancho real de la imagen |
Vista Previa
Código de Ejemplo
<form action="demo_form.php">
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre">
</div>
<div class="form-group">
<label for="ap">Apellido:</label>
<input type="text" class="form-control" id="ap" placeholder="Apellido">
</div>
<input type="submit" value="Enviar">
</form>Descripción
Este elemento es usado para definir un formulario para llenado del usuario
|
Atributo |
Valor |
Descripción |
|
action |
URL |
Espeficica la URL de donde se enviaran los datos del formularios después de ser procesados |
|
method |
Get o Post
|
Especifica el método http con el que se realizara el envio de los datos del formulario |
|
enctype |
application/x-www-form-urlencoded |
Especifica como los datos del formulario serán codificados para su envio al servidor (solo usando método post) |
|
name |
texto |
Asigna un nombre al formulario |
|
target |
_blank |
Especifica donde se desplegara la respuesta que se produce una vez los datos del formulario son enviados |
Vista Previa
Código de Ejemplo
<form action="demo_form.php">
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre">
</div>
<div class="form-group">
<label for="ap">Apellido:</label>
<input type="text" class="form-control" id="ap" placeholder="Apellido">
</div>
<input type="submit" value="Enviar">
</form>Descripción
Mediante el uso de sus diferentes tipos permite definir diferentes formas de entrada como puede ser el “text”, “password”
|
Atributo |
Valor |
Descripción |
|
checked |
Especifica que un <input> debe estar pre-seleccionado cuando la página carga (aplica para elementos con type="checkbox" o type="radio") |
|
|
numérico |
Especifica un número máximo de caracteres permitidos en u input |
|
|
texto |
Especifica el nombre de un elemento |
|
|
disabled |
Especifica que el elemento debe estar deshabilitado |
|
|
id |
texto |
Especifica un identificador único para ese elemento |
|
numérico |
Especifica el ancho en caracteres que tendrá el elemento |
|
|
type |
button |
Especifica el tipo de elemento de entrada que se utilizara(algunos tipos como date son inputs de html5 y no son soportados por todos los navegadores) |
|
texto |
Especifica un valor para el elemento de entrada |
Vista Previa
Código de Ejemplo
<div style="border-style: solid; border-color: #ff0000 #ff0000;"> <h3>Título</h3> <p>Párrafo</p> </div>
Descripción> Elemento que sirve como contenedor de otros elementos html.