Sistema Internet de Presidencia

Firma Institucional

presidencia.gob.mx

Paginas Internas

Tipos de páginas internas

La zona de contenido es el área donde propiamente se colocara todo el contenido de las paginas Internas. De momento existen 4 modelos (tipos) para las paginas internas en cuanto a su estructura, la cual esta basada de manera similar a las paginas de inicio.

Se usan los mismo elemento de las paginas de inicio, como son: el concepto de renglón y columna, los cuales ya también están predefinidos para las paginas internas.

Tipo 2

cuadro B 74.75%

cuadro K 24.25%

									<!--Renglón tipo 2-->
<div class="renglon">
<div class="cuadro B margen_derecho">
<p>cuadro B <strong>74.75%</strong></p>
</div>
<div class="cuadro K">
<p>cuadro K<strong> 24.25%</strong></p>
</div>
</div>
<!-- fin Renglón tipo 2-->
									.renglon { display: table; margin-bottom: 1em; margin-right: auto; margin-left: auto; width: 100%; 	max-width: 1492px; }
.cuadro { float: left; min-height: 16em; border-style: none; margin-bottom: 0; }
.B { width: 74.75%; }
.K { width: 24.25%; }
.margen_derecho { margin-right: 1%; }

Tipo 1

cuadro D 65%

cuadro G 34%

									<!--Renglón tipo 1-->
<div class="renglon">
<div class="cuadro D margen_derecho">
<p>cuadro D <strong>65%</strong></p>
</div>
<div class="cuadro G">
<p>cuadro G<strong> 34%</strong></p>
</div>
</div>
<!-- fin Renglón tipo 1-->
									.renglon { display: table; margin-bottom: 1em; margin-right: auto; margin-left: auto; width: 100%; 	max-width: 1492px; }
.cuadro { float: left; min-height: 16em; border-style: none; margin-bottom: 0; }
.D { width: 65%; }
.G { width: 34%; }
.margen_derecho { margin-right: 1%; }

Tipo 3

cuadro P 79.8%

cuadro M 19.2%

									<!--Renglón tipo 3-->
<div class="renglon">
<div class="cuadro P margen_derecho">
<p>cuadro P <strong>79.8%</strong></p>
</div>
<div class="cuadro M">
<p>cuadro M<strong> 19.2%</strong></p>
</div>
</div>
<!-- fin Renglón tipo 3-->
									.renglon { display: table; margin-bottom: 1em; margin-right: auto; margin-left: auto; width: 100%; 	max-width: 1492px; }
.cuadro { float: left; min-height: 16em; border-style: none; margin-bottom: 0; }
.P { width: 79.8%; }
.M { width: 19.2%; }
.margen_derecho { margin-right: 1%; }

Tipo 4

cuadro A100%

									<!--Renglón tipo 4-->
<div class="renglon">
<div class="cuadro A margen_derecho">
<p>cuadro A <strong>100%</strong></p>
</div>
</div>
<!-- fin Renglón tipo 4-->
									.renglon { display: table; margin-bottom: 1em; margin-right: auto; margin-left: auto; width: 100%; 	max-width: 1492px; }
.cuadro { float: left; min-height: 16em; border-style: none; margin-bottom: 0; }
.A { width: 100%; }
.margen_derecho { margin-right: 1%; }

Ruta de Navegación

Ruta de navegacion o Breadcrumbs

							<!-- Breadcrumb -->
<ul class="breadcrumbs">
<li><a title="Inicio" href="index.php">Inicio</a></li>
<li><a title="Plantillas 2012" href="index.php">Plantillas 2012</a></li>
<li><a title="Página Interna" href="interna.php">Página Interna</a></li>
</ul>
<!-- Fin de Breadcrumb -->
							ul.breadcrumbs{margin:10px 0 27px;padding:0;line-height:0%;font-size:0;border:1px solid transparent;font-size:0;}
ul.breadcrumbs li{list-style-type:none;margin:0!important;padding:0;display:inline-block;position:relative;line-height:100%;font-size:14px;}
ul.breadcrumbs li a{padding:10px 25px 10px 15px;background:url(imagenes/breadcrumbs-bg.gif) no-repeat right center;text-decoration:none;border-top:1px solid #efefef;border-bottom:1px solid #efefef;font-size:12px;}
ul.breadcrumbs li.last a{color:#333;cursor:default;text-decoration:none;background:none;}
ul.breadcrumbs a:hover{text-decoration:underline;}
ul.breadcrumbs li.primera a{border-left:1px solid #efefef;}
ul.breadcrumbs li.ultima a{border-right:1px solid #efefef;font-weight:bold;background-image:none;color:maroon;}

El archivo general.js incluye la siguiente declaración:

							$('ul').find('li:first-child').addClass('primera');
$('ul').find('li:last-child').addClass('ultima');

la cual agrega automáticamente el atributo class="primera" al primer elemento <li> y el atributo class="ultima" al ultimo elemento <li>, por lo que de usar el archivo general.js un html

Subir

Herramientas del usuario (opcional)

Se uso para fines de ejemplo unicamente el servicio de Adthis

							<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style herramientas_del_usuario">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<!-- AddThis Button END -->
							.herramientas_del_usuario { margin-bottom: 16px; height: 1em; }
						

Se uso para fines de ejemplo unicamente el servicio de Adthis

							<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fdf8cc94940859d"></script>
						

Este código depende de una cuenta independiente.

Subir

Títulos de las notas

Paginas Internas para las plantillas 2012

							<h2>Paginas Internas para las plantillas 2012</h2>
						
							h2 { font-size: 1.3em; color: maroon; }
						
Subir

Textos e Imágenes de las notas

Imagen de Prueba Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Imagen de Prueba Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Ejemplo 1 :

							<p>
<img class="imagen100" src="imagenes/ejemplos/imagen_cuadro_D_2.jpg" alt="Imagen de Prueba" />
<strong>Lorem Ipsum</strong> es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, ..............</p>

Ejemplo 2 :

							<p>
<img class="imagen70" src="imagenes/ejemplos/imagen_cuadro_D_2.jpg" alt="Imagen de Prueba" />
<strong>Lorem Ipsum</strong> es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, ..............</p>
							.imagen100 { width: 100%; }
.imagen70 { width: 70%; float: left; margin: 0 .5em .5em; }
Subir

Autor de la Nota

Última modificación :
Sábado 9 de Junio de 2012, Rogelio Argumedo Uribe

							<p class="autor_nota">
Última modificación : <br />Sábado 9 de Junio de 2012, Rogelio Argumedo Uribe
</p>
							.autor_nota { color: #ba5112; text-align: right; font-size: .7em; }
						
Subir
Av. Constituyentes #161 Col. San Miguel Chapultepec México D.F. C.P 09000 - Tel. 50935300 Ext. 3479 -Comentarios sobre este Sitio de Internet Comentarios y Sugerencias sobre éste sitio

PRESIDENCIA DE LA REPÚBLICA, MÉXICO - ALGUNOS DERECHOS RESERVADOS © 2012 - POLÍTICAS DE PRIVACIDAD