Secretaría de Finanzas

Search Google Appliance

Lineamientos de Aplicaciones

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 .

 

 

 

Elemento A

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
_parent
_self
_top

Especifica donde se abrirá el documento vinculado en esa URL

Elementos  H1-H6

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.

Elemento Header

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.

Elemento HR

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.

Elemento P

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.

Elementos UL/OL

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.

Elemento Blockquote

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.

Elemento img

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

height

pixeles

Asigna el alto al cual se representara la imagen, en caso de no asignarse toma el tamaño real de la imagen

src

URL

Especifica la URL de la imagen a visualizarse

width

pixeles

Asigna el alto al cual se representara la imagen, en caso de no asignarse toma el ancho real de la imagen

Elemento form

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
multipart/form-data
text/plain

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
_self
_parent
_top

Especifica donde se desplegara la respuesta que se produce una vez los datos del formulario son enviados

Elemento input

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

checked

Especifica que un <input> debe estar pre-seleccionado cuando la página carga (aplica para elementos con type="checkbox" o type="radio")

maxlength

numérico

Especifica un número máximo de caracteres permitidos en u input

name

texto

Especifica el nombre de un elemento

disabled

disabled

Especifica que el elemento debe estar deshabilitado

id

texto

Especifica un identificador único para ese elemento

size

numérico

Especifica el ancho en caracteres que tendrá el elemento

type

button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week

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)

value

texto

Especifica un valor para el elemento de entrada

Elemento DIV

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.