contenido - instituto politécnico nacional · pestañas horizontales: ... los motores de búsqueda...

Coordinación General de Servicios

Informáticos

Material para el desarrollo de sitios Web de

Nivel Medio Superior y Superior

Contenido

Introducción ............................................................................................................................................. 4

ASP NET ................................................................................................................................................. 4

Master Page........................................................................................................................................... 4

Diseño Responsivo ............................................................................................................................. 5

Semántica en la web .............................................................................................................................. 5

Micro-datos .......................................................................................................................................... 5

Ejemplos ............................................................................................................................................... 7

Zonas y tamaños ..................................................................................................................................... 8

Zonas ..................................................................................................................................................... 8

Ejemplo de zona con 3 divisiones ................................................................................................... 9

Material para la implementación de módulos en las páginas web del Instituto ...................................... 10

Módulos con imagen ....................................................................................................................... 10

Imagen .................................................................................................................................................. 10

Imagen con fondo ................................................................................................................................. 10

Módulo de imagen con una máscara de texto transparente ............................................................... 11

Módulo de iconografía con efecto hover con crecimiento gradual del icono, para uso inferior de la

página principal para acceder a contenidos internos el sitio ............................................................... 12

Módulo de iconografía con efecto de hover con cambio de color ...................................................... 13

Módulo de menú a páginas de interés ................................................................................................. 13

Módulo de imagen con tres columnas con efecto de desaparición gradual del texto en modo hover.

.............................................................................................................................................................. 15

Módulo de imagen con enlace ............................................................................................................. 15

Módulo de texto para títulos .................................................................................................................... 17

Módulo de texto para resaltar un título ............................................................................................... 17

Módulo de texto para un título grande con fondo ............................................................................... 17

Módulos de texto con imagen lateral ....................................................................................................... 17

Módulos 01 ........................................................................................................................................... 17

Módulo 01 con texto con imagen lateral.............................................................................................. 18

Módulo 01 de texto con imagen lateral derecha ................................................................................. 19

Módulo 01 de texto con imagen lateral y fondo sólido ........................................................................ 20

Módulo 01 de texto para contacto ....................................................................................................... 20

Módulo texto para contacto y descripción de áreas ............................................................................ 21

Módulo 01 de texto con dos opciones de vínculo e imagen. ............................................................... 23

Módulo 01 de texto, fondo sólido, iconografía y textos con referencias ............................................. 24

Módulo 01 de texto con imagen y espacio para descripción ............................................................... 25

Módulo de texto con imagen lateral y fondo gris ................................................................................ 26

Módulos 02 de texto ................................................................................................................................. 27

Módulo 02 de texto con viñetas ........................................................................................................... 28

Módulo de texto con viñetas ................................................................................................................ 29

Módulo 02 de texto descriptivo ........................................................................................................... 30

Módulo 03 de texto con imagen y enlace ............................................................................................ 32

Módulo 03 de texto con imagen superior, título y descripción............................................................ 34

Módulo de texto con imagen superior ................................................................................................. 35

Módulo de texto con descripción del responsable ............................................................................... 36

Módulo de completo, fondo de zona completa a 3 columnas con texto, vínculo e imagen. ............... 37

Módulo de menú con 4 enlaces diferentes .......................................................................................... 39

Módulo de imagen de PDF ................................................................................................................... 40

Módulo de texto con hipervínculo e imagen superior ......................................................................... 41

Módulo de 3 columnas para botones auxiliares ................................................................................... 41

Módulo de texto con iconografía ......................................................................................................... 43

Módulo de directorio ............................................................................................................................ 44

Módulo de texto con botones enmarcados ......................................................................................... 44

Módulo de acordeón ............................................................................................................................ 47

Módulos que deberán permanecer sin alteraciones debido a su contenido y cumplir con las acciones

necesarias para la homologación de la información. ............................................................................... 48

Eventos Institucionales ......................................................................................................................... 48

Curricular del titular .............................................................................................................................. 48

Buscador de información ...................................................................................................................... 49

Sección de redes sociales ..................................................................................................................... 49

Sección de Oferta Educativa ................................................................................................................. 49

Sección de Estructura Orgánica ............................................................................................................ 50

Pestañas .................................................................................................................................................... 51

Modificar la pestaña de Oferta Educativa ............................................................................................ 51

Pestañas horizontales: .......................................................................................................................... 53

Para la pestaña 1 (Oferta Educativa) ................................................................................................ 53

Modificar las pestañas verticales .......................................................................................................... 53

Modificación de colores en las pestañas: ............................................................................................. 55

Modificación de colores en los bordes ................................................................................................. 56

Modificación de colores en los bordes de las pestañas horizontales ............................................... 56

Modificación de colores en los bordes de las pestañas verticales ................................................... 57

Pestaña de Biblioteca ........................................................................................................................... 58

Modificar las pestañas verticales ...................................................................................................... 59

Modificar el color de fondo .............................................................................................................. 63

Modificación de colores en los bordes de las pestañas verticales ................................................... 64

Introducción

ASP NET ASP.NET es un framework web para la construcción de servicios y aplicaciones web

modernos con esta herramienta puede crear rápidamente sitios web basados en HTML,

CSS y JavaScript y añadir fácilmente capacidades más complejas como las API Web,

formularios sobre datos o comunicaciones en tiempo real.

Master Page

La Master Page o Página Principal que se muestra es la estructura base para la actualización

de sitios web del Instituto, como se muestra en la siguiente imagen.

Diseño Responsivo

El diseño web adaptable (o adaptativo), conocido por las

siglas RWD del inglés Responsive Web Design, es una

filosofía de diseño y desarrollo cuyo objetivo es adaptar la

apariencia de las páginas web al dispositivo que se esté

utilizando para visualizarlas. Es por ello que el diseño de la

Master Page es responsiva y que permitirá que los sitios

web se visualicen adecuadamente en dispositivos como

tabletas, teléfonos inteligentes, libros electrónicos,

portátiles, PC, etc; y este se basa en el uso de CSS y HTML

para cambiar el tamaño, estilo, reducir, ampliar, o mover

el contenido para que se vea bien en cualquier pantalla.

Semántica en la web

Micro-datos En una definición, podemos decir que los micro-datos (microdata) son conjuntos de

atributos y valores que se aplican a un contenido web normal para describir ese contenido

y aportar un significado.

HTML5 introduce la posibilidad de definir la semántica personalizada utilizando los micro-

datos (microdata). De hecho, los motores de búsqueda como Google están diseñados para

presentar al usuario los resultados de búsqueda más útiles e informativos. Esta

información no afecta el aspecto del contenido de la página, pero si permite a los motores

de búsqueda entender la información que proviene de la página web. Por lo tanto, los

micro-datos también se utilizan como un método para hacer una página web de búsqueda

más amigable para los buscadores.

Para crear un elemento utilizando la sintaxis de los micro-datos, básicamente se van a

declarar tres atributos de la especificación de HTML:

itemscope: Un atributo booleano usado para crear un elemento.

itemprop: Se utiliza para agregar una propiedad a un objeto o uno de los

descendientes del elemento.

itemtype: Se utiliza para definir un vocabulario personalizado.

Ejemplos

Imágenes:

Texto:

Links:

Código HTML El vínculo: Será con la siguiente manera de descripción.

<div class="modulo03">

<a href="http://www.abogadogeneral.ipn.mx/Normatividad/Paginas/Menu_normatividad.aspx"

target="_blank" itemprop="url">

</a>

</div>

Código HTML La descripción: Será información de interés.

<div class="div-img hidden">

<img class="img" itemprop=”image” src=" /2015/03/foto2.png" title="Foto2" alt="Foto2"/>

</div>

Código HTML El título: Deberá de ser con altas y bajas.


<div class="ContenedorTxt">

<h2 itemprop="name">Titulos</h2>

<div class="Texto">

<p itemprop="description">Texto descriptivo.</p>

</div>

</div>

</div>

</div>

Zonas y tamaños

Zonas

Las zonas son espacios asignados en diferentes tamaños para agregar contenido y

mantener el comportamiento responsivo adecuado que se encuentra definido, el diseño de

página como se muestra en la siguiente imagen:

En la siguiente imagen mostramos el diferente tamaño de zonas que podrás utilizar para

los contenidos y texto, cabe mencionar que el alto de la imagen debe ser del mismo

tamaño.

Ejemplo de zona con 3 divisiones

En estas imágenes son de las siguientes dimensiones:

Ancho: 370px

Altura: 250px

Esto es para para estas imágenes se vean de manera homogénea y tengan el correcto

comportamiento responsivo.

Material para la implementación de módulos en las páginas web del Instituto

Este material tiene la finalidad de dar a conocer los módulos con diferentes elementos que

podrán utilizar en las zonas para integrar en los sitios web.

Módulos con imagen

Imagen

Código HTML Tamaño de Banner:

<img class="img" alt="Misión, Visión y Objetivos"

src="/sites/NMS/conocenos/PublishingImages/banner-mision.jpg" itemprop="image"/>

Imagen con fondo

Si requieres de utilizar la zona completa con una imagen y color de fondo sólido, es

importante señalar que no se podrán utilizar degradados o imágenes.

Código HTML Tamaño de Banner:

Color: Sólido.

Sugentencias: URL de paleta de colores.

<div class="banner-Principal">

<center><img src="/sites/NMS/PublishingImages/banner-Inicio.jpg" alt="CECyT 13"/></center>

</div>

http://materializecss.com/color.html

Módulo de imagen con una máscara de texto transparente

Si quieres promover un evento o actividad con un texto explicativo podrás utilizar este

módulo que se integra por un título, descripción e imagen de fondo, así como utilizarlos en

las diferentes zonas que contiene tu diseño de página. (Los efectos con hover en CSS, solo

se visualizaran en equipos de cómputo).

También puedes utilizar este módulo de imagen con una máscara de texto transparente en

3 columnas.


La descripción: El texto no deberá ser más extenso de 5 renglones.

<div class="contenedor-img"> <img src="/sites/NMS/PublishingImages/conv.jpg" alt=""/>

<div class="mascara">

<h2>Convocatoria</h2>

<p>Para participar en el proceso para la elección de integrantes de la Comisión Organizadora del

Congreso Nacional Politécnico; para el proceso de Admisión al Cilio Escolar 2016-2017</p>

</div>

</div>

Módulo de iconografía con efecto hover con crecimiento gradual del icono, para uso inferior de la página principal para acceder a contenidos internos el sitio


La descripción: El texto deberá ser una breve descripción del tema o evento.

<div id="cursos" class="contendorFondo">

<h3>Cursos del mes de Noviembre</h3>



<ul>



<li>

<div class="contenedor-img">

<img src="/sites/NMS/Oferta-

Educativa/PublishingImages/c1.jpg" alt=""/>



<p>Para participar en el proceso para la …</p>

</div>

</div> </li>



<li>


<img src="/sites/NMS/Oferta-Educativa/PublishingImages/c2.jpg" alt=""/>




</div>

</div> </li>



<li>


<img src="/sites/NMS/Oferta-Educativa/PublishingImages/c3.jpg" alt=""/>

<a href="http://www.ipn.mx/">




</div>

</a>

</div> </li>

</ul>



</div>

Módulo de iconografía con efecto de hover con cambio de color

Módulo de menú a páginas de interés


La descripción: Se usará un ícono representativo del contenido.

<div class="menu-accesos">

<ul>

<li><a href="#"><div class="consulta_dig"></div>

<span>Consulta Digital</span></a></li>

<li><a href="#"><div class="egresados"></div>

<span>Egresados</span></a></li>

<li><a href="#"><div class="personal"></div>

<span>Personal de apoyo</span></a></li>

<li><a href="#"><div class="docente"></div>

<span>Docente</span></a></li>

<li><a href="#"><div class="localizacion"></div>

<span>Localización</span></a></li>

</ul>

</div>

Código HTML El título: Deberá de ser con mayúsculas.

La descripción: Se utilizará un ícono representativo según el contenido o botón.

<div class="menuHorizontal">

<ul class="centrarbloques">

<li>

<a href="http://www.dess.seis.ipn.mx/serviciosocial/Paginas/Servicio-

Social.aspx" id="iconSocial">

<span>Servicio Social</span>

</a>

</li>

</ul>

</div>


Los íconos: Harán referencia a los diferentes campos en el menú.

<div class="fondo-modulos">

<div class="zona-completa">

<div class="titulo-azul title-promo CentrarContenido"><span>Promoción

Docente</span></div>

<div class="modulo02 mod-promo">


<div class="Texto" itemprop="description">

<div class="cincoColumnas">

<ul>

<li>

<div class="CentrarContenido">

<a href="#" itemprop="url">

<img class="img-opacity" alt="Convocatoria"

src="/sites/NMS/Docentes/PublishingImages/pd1.png"

itemprop="image"/><span>Convocatoria</span></a></div>

</li>

<li>



<img class="img-opacity" alt="Cronograma"

src="/sites/NMS/Docentes/PublishingImages/pd2.png" itemprop="image"/>

<span>Cronograma</span></a></div>

</li>

<li>



<img class="img-opacity" alt="Reuniones para coordinadores"

src="/sites/NMS/Docentes/PublishingImages/pd3.png" itemprop="image"/><span>Reuniones para

coordinadores</span></a></div>

</li>

<li>



<img class="img-opacity" alt="Acceso al sistema"

src="/sites/NMS/Docentes/PublishingImages/pd4.png" itemprop="image"/><span>Acceso al

sistema</span></a></div>

</li>

<li>



<img class="img-opacity" alt="Directorio de coordinadores"

src="/sites/NMS/Docentes/PublishingImages/pd5.png" itemprop="image"/><span>Directorio de

coordinadores</span></a></div>

</li>

</ul></div>

</div>

</div>

</div>

</div>

</div>

Módulo de imagen con tres columnas con efecto de desaparición gradual del texto en modo hover.

Módulo de imagen con enlace


Contenido: Deberá tener un enlace a un documento o a otra página con mayor

información del tema.

<div class="tresColumnas biblio-col">

<ul>

<li>

<div class="contenedor-imgns">

<a href="#">

<img src="/sites/NMS/Estudiantes/PublishingImages/Servicios.jpg" alt=""/>

<img class="top" src="/sites/NMS/Estudiantes/PublishingImages/Servicios-d.jpg" alt=""/>

</a>

</div>

</li>

<li>


<a href="#">

<img src="/sites/NMS/Estudiantes/PublishingImages/Reglamento.jpg" alt=""/>

<img class="top" src="/sites/NMS/Estudiantes/PublishingImages/Reglamento-d.jpg" alt=""/>

</a>

</div>

</li>

<li>


<a href="#">

<img src="/sites/NMS/Estudiantes/PublishingImages/Renovaciones.jpg" alt=""/>

<img class="top" src="/sites/NMS/Estudiantes/PublishingImages/Renovaciones-d.jpg"

_moz_resizing="true" _moz_abspos="white" alt=""/>

</a>

</div>

</li>

</ul>

</div>

La descripción: Deberá contener iconografía correspondiente al tema a tratar.







<div class="tresColumnas servicio-becas">

<ul>

<li>

<div class="CentrarContenido borde">


<img alt="Becas Institucionales"

src="/sites/NMS/Estudiantes/PublishingImages/Servicios/becas.png" itemprop="image"/><span>Becas

Institucionales</span></a></div>

</li>

<li>



<img alt="Convocatoria de becas 2014-2015"

src="/sites/NMS/Estudiantes/PublishingImages/Servicios/convocatoria.png" itemprop="image"/>

<span>Convocatoria de becas 2014-2015</span></a></div>

</li>

<li>



<img alt="Cronograma del proceso de becas"

src="/sites/NMS/Estudiantes/PublishingImages/Servicios/cronograma.png"

itemprop="image"/><span>Cronograma del proceso de becas</span></a></div>

</li>

</ul></div>

</div>

</div>

</div>

</div>

Módulo de texto para títulos

Módulo de texto para resaltar un título

Módulo de texto para un título grande con fondo

Módulos de texto con imagen lateral

Módulos 01

Sirve para agregar contenedores de texto con imágenes en un lateral, que puede ser a la

izquierda o derecha, además de poder agregar secciones de hipervínculos y listas de

contenido.


La descripción: El texto deberá está justificado a la izquierda.

<div class="titulote"><span>ACTIVIDADES DEL DIRECTOR</span></div>


<div id="titulo-carrera" class="centrar">

<center>

<div class="bannertitulo">

<p>Lenguas Extranjeras</p>

</div>

</center>

</div>

Módulo 01 con texto con imagen lateral


La descripción: El texto deberá está justificado a la izquierda y contendrá un enlace

para mayor descripción o información del tema a tratar.


<div class="ContenedorImg">

<img src="http://www.ipn.mx/Acerca-del-IPN/PublishingImages/dir-gral/2016/ad-567.jpg"

alt=""/></div>


<h2>Inauguró IPN el 5º Encuentro de Proyecto Aula</h2>

<div class="Texto">

<p>Con el propósito de impulsar una cultura del aprendizaje centrado en el alumno...</p>

</div>

<div class="leer">

<a href="http://www.ipn.mx/CCS/2016/Paginas/567.aspx"><span>Leer más</span></a>

</div>

</div>

</div>

Módulo 01 de texto con imagen lateral derecha

Se personaliza el color de fondo, el borde además de colocar la imagen del lado derecho:



<div class="modulo01 subtitle"

<h2 itemprop="name">Escudo</h2>

<div class="ContenedorImg der escudocecyt">

<img itemprop="image" src="/sites/NMS/Conocenos/PublishingImages/cecyt13.png"

alt="Escudo"/>

</div>


<div class="Texto sombra subtitle">

<p itemprop="description">El escudo que esta escuela ostento desde su origen, fue el de la

vocacional 5 “Ciudadela”, hoy CECyT 5 “Benito Juárez”; ya …

</p>

<p>El 11 de mayo de 1988, la directora del centro, C.P. Virginia Fuentes Quiroz …</p>

</div>

</div>

</div>

Módulo 01 de texto con imagen lateral y fondo sólido

Se personaliza el título, el color de fondo, el color y tamaño de letra además de colocar la

imagen del lado derecho y personalizar el enlace web:

Módulo 01 de texto para contacto

Se personaliza el título, el color y tamaño de letra además de colocar la imagen del lado

izquierdo.


La descripción: El texto deberá está justificado a la izquierda y contener un enlace a la

semblanza profesional del titular o su curriculum vitae resumido.

<div class="modulo01 fconocenos">

<div class="ContenedorImg der">

<img alt="Enrique Fernandez Fassnacht" src="/Acerca-del-

IPN/PublishingImages/portada/foto-director.jpg" itemprop="image"/>

</div>


<h2>Dr. Enrique Fernández Fassnacht</h2>

<div class="Texto">

<p itemprop="description">Es el actual Director del Instituto Politécnico

Nacional…</p>

</div>

<div class="leer">

<a href="/DG/Documents/semblanza-director.pdf" itemprop="url"><span>Consulta

su

semblanza profesional»</span></a>

</div>

</div>

</div>

Módulo texto para contacto y descripción de áreas

En esta sección se utilizan dos módulos 01 para poder agregar la información del contacto

así como una breve descripción del lugar al que se hace mención, por lo que se personaliza

el título, el color y tamaño de letra además de colocar la imagen del lado izquierdo.

Código HTML El nombre: Deberá de ser en mayúsculas.

El cargo: Deberá ser con altas y bajas, y justificado a la izquierda.

<div class="modulo01 equipo">


<img src="/sites/NMS/conocenos/PublishingImages/a.png" alt=""/>

</div>


<h3>ING. GERMÁN GARDUÑO HERRERA</h3>

<div class="Texto">

<p>Dirección</p>

</div>

</div>

</div>

<br/><br/>


La descripción: El contacto será con nombre, cargo y extensión y la descripción será

referente al espacio o servicio que se esté publicando en este módulo.

<center>

<div class="UbicacionSitios">

<div class="UbicacionTitulo">


<h2 id="Edificio" itemprop="name"><br/>Auditorio</h2>

</div>

</div>

<div class="UbicacionEncargado">



<img id="UbicacionPersona" alt="IPN"

src="/sites/NMS/conocenos/PublishingImages/personaB.png" itemprop="image"/>

</div>


<p id="encargado"><b>Lic. Esteban Hernandez Gomez</b></p>

<p id="encargado"><b>Responsable De Servicios Administrativos</b></p>

<p id="encargado"><b>Tel: 57296000 Ext:65236</b></p>

</div>

</div>

</div>

<div class="UbicacionDescripcion">


<div id="EdificioImg" class="ContenedorImg">

<img alt="IPN" src="/sites/NMS/PublishingImages/imagenIPN.jpg" itemprop="image"/>

</div>


<h2 itemprop="name">Descripción</h2>

<div class="Texto">

<p itemprop="description">Espacio destinado para realizar exposiciones de arte: pintura,

escultura…</p>

</div>

</div>

</div>

</div>

<div class="UbicacionPie">

</div>

</div>

</center>

Módulo 01 de texto con dos opciones de vínculo e imagen.

Se personaliza los enlaces web en tamaño, color y posición además de colocar la imagen

del lado izquierdo se recomienda que se utilicen en zonas de mínimo de 870px.


La descripción: No deberá exceder de dos renglones y los vínculos serán de 1 a 2

palabras a distintas páginas.


<div class="der">

<img alt="IPN" src="/sites/NMS/Oferta-Educativa/PublishingImages/leng2.jpg"

itemprop="image"/>

</div>


<h2 itemprop="name"><b>Agosto-Diciembre 2016</b></h2>

<div class="Texto">

<p itemprop="description">Si deseas conocer el proceso y los periodos de registros a los d

iferentes cursos que la Dirección de Formación en Lenguas Entranjeras(DFLE) oferta a trávez de si Site

mas de Administración Escolar (SAES), consulta los siguentes enlaces:</p>

</div>

<div class="cenlexSelect">

<a href="http://www.saes.cenlexsto.ipn.mx/" target="_blank" itemprop="sameAs">Zacatenco</a>

<a href="http://www.saes.cenlexsto.ipn.mx/" target="_blank" itemprop="sameAs">Santo Tomás</a>

</div>

</div>

</div>

Módulo 01 de texto, fondo sólido, iconografía y textos con referencias


La descripción: Deberá contener una imagen y el texto correspondiente al título.



<div class="fondo-becas">

<div class="modulo01 mod2-becas">

<div class="titulo-azul"><span>Becas</span></div>


<img alt="Becas" src="/sites/NMS/Estudiantes/PublishingImages/Servicios/apartado-

becas.png" itemprop="image"/>

</div>


<div class="Texto">

<p itemprop="description">Desde el primer semestre de tu estancia en esta ...</p>

<p>La beca es la aportación económica determinada en cada programa ...</p>

<p class="text-aviso">Si deseas más información consultar la página <a

href="http://www.ebecas.ipn.mx/" target="_blank">www.ebecas.ipn.mx</a> o enviar un correo a <a

href="mailto:[email protected]">[email protected]</a> o bien, comunicarte al teléfono 5729-6000

exts. 51838, 51836, 51913, 51914 y 51844 dónde con gusto responderán a tus dudas.</p>

<br/>

<p>La Dirección de Servicios Estudiantiles te ofrece también los siguientes servicios:</p>

</div>

</div>

</div>

</div>

Módulo 01 de texto con imagen y espacio para descripción

Se personaliza el título, el color de fondo, el color y tamaño de letra además de colocar la

imagen del lado derecho y personalizar el enlace web.

Código HTML La descripción: Será información de interés para el usuario dependiendo de la página

o el contenido que se pretenda publicar en este módulo.

<div class="fondo-credencial">



<img itemprop="image" src="/sites/NMS/Egresados/PublishingImages/credencial.jpg"

alt="Credencial de Egresado"/>

</div>


<div class="Texto">

<p itemprop="description">Conoce el procedimeinto para tramitar tu Credencial de Egresado

dando click en la siguiente imagen.</p>

</div>

</div>

</div>

</div>

Módulo de texto con imagen lateral y fondo gris


La descripción: El texto deberá proporcionar información referente al título que

estemos utilizando en esta área.

<div class="fondo-gris">


<div class="modulo01 modServicio">

<div class="ContenedorImg ContenedorImg-serv">

<img alt="Servicio Social" src="/sites/NMS/Egresados/PublishingImages/servicio-social.jpg"

itemprop="image" _moz_resizing="true"/>

</div>


<div class="titulo-azul title-serv"><span>SERVICIO SOCIAL</span></div>

<div class="Texto">

<p itemprop="description">Es una actividad formativa que amplia tu…</p>

</div>

</div>

</div>

</div>

</div>

Módulos 02 de texto





<h2 itemprop="name">Misión</h2>

<div class="Texto">

<p itemprop="description"> El Centro de Estudios Científicos y Tecnológicos

...</p>

</div>

</div>

</div>

Módulo 02 de texto con viñetas


El contenido: El texto deberá está justificado a la izquierda y cada opción o enunciado

estará diferenciado por una viñeta.



<h2 itemprop="name">Objetivos</h2>

<div class="Texto">

<div class="UnaColumnaA numRomanos">

<ol>

<li>Contribuir a través del proceso...</li>

<li>Realizar investigación científica y tecnológica con vista...</li>

</ol>

</div>

</div>

</div>

</div>

Módulo de texto con viñetas


La descripción: Contendrá un cuerpo y una lista que diferenciará cada punto u opción

por una viñeta.



<h2 itemprop="name">Módulo 2</h2>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. …….</p>

<div class="UnaColumnaA">

<ul>

<li>Una Columna</li>

<li>Lorem ipsum dolor sit amet</li>





</ul>

</div>

</div>

</div>

</div>

Módulo 02 de texto descriptivo


La descripción: Será acorde al título, deberá contener información de un contacto,

vínculos a enlaces o páginas relativas al mismo tema, horarios de atención o servicio y

un enlace a un buzón de comentarios.

<div class="fondoMax">

<center>

<div class="containerGE">

<div class="DosColumnasB">

<ul>

<li>


<div class="ContenedorTxt horariosGE">

<h1 itemprop="name">Gestión Escolar</h1>

<div class="Texto justificado" itemprop="description">

<p>El sistema de Administración Escolar (SAES), es la herramienta…</p>

<p>Registro y control de las inscripciones, reinscripciones, altas, bajas y ...</p>

<p>Para realizar estas tareas, el departamento de Gestión Escolar es el ...</p>

</div>

<br/>

<h1 itemprop="name" id="titSaes">SAES</h1>

<br/><br/><br/>

<div class="UbicacionEncargado">



<img id="contactog" alt="IPN" src="/sites/NMS/Estudiantes/PublishingImages/contacto.png"

itemprop="image"/>

</div>


<p id="encargado"><b>Lic. Esteban Hernandez Gomez</b></p>

<p id="encargado"><b>Reponsable De Servicios Administrativos</b></p>

<p id="encargado"><b>Tel: 57296000 Ext:65236</b></p>

</div>

</div>

</div>

</div>

</div>

</li>

<li>

<div class="modulo03 fondo-mod3 gestion">

<div>

<a href="#" target="_blank" itemprop="url">

<img class="imagenes" alt="Talleres para padres CECYT13"

src="/sites/NMS/Estudiantes/PublishingImages/3.jpg" itemprop="image"/></a>

</div>



<div id="GestionLink" class="ContenedorTxt">

<p><a href="http://www.saes.ipn.mx/">Consulta de Calificaciones</a></p>

<p><a href="#">Reglamento General de Estudios</a></p>

<p><a href="#">Tramites escolares</a></p>

</div>

<br/>


<h2>Horario de atención a Alumnos</h2>

<div class="Texto">

<div class="DosColumnasA">

<ul>

<li>Turno matutino</li>

<li>10:00-12:00</li>

<li>Turno vespertino</li>

<li>16:00-18:00</li>

</ul>

</div>

</div>

</div>


<h2>Horario para Tramites</h2>

<div class="Texto">

<div class="DosColumnasA">

<ul>

<li>Turno matutino</li>

<li>10:00-12:00</li>

<li>Turno vespertino</li>

<li>16:00-18:00</li>

</ul>

</div>

</div>

</div>

Módulo 03 de texto con imagen y enlace

<br/>

<div id="GestionBuzon" class="ContenedorTxt">

<div class="Texto">

<p id="TextoG" itemprop="description">

<a>Buzón de Comentarios</a>

</p>

</div>

</div>



</div>

</li>

</ul>

</div>

</div>

</center>

</div>


<div class="modulo03 fondo-mod3">

<div>



src="/sites/NMS/Estudiantes/PublishingImages/1.jpg" itemprop="image"/>

</a>

</div>

<div class="ContenedorTxt GestionPie">

<div class="Texto">


Requisitos para ETS

</p>

</div>

</div>

</div>


Descripción: Se utiliza en una zona de 1170px para lograr centrar los elementos.

<div class="fondoMax fondowhite">

<center>

<div class="containerGE">


<ul>

<li>


<div>


<img class="imagenes" alt="Mapa Curricular NMS"


</a>

</div>

<div class="ContenedorTx GestionEsco">

<div class="Texto">


Mapa Curricular

</p>

<p id="TextoG2" itemprop="description">2008</p>

</div>

</div>

</div>

</li>

<li>


<div>




</a>

</div>

<div class="ContenedorTxt GestionEsco">

<div class="Texto">


Calendario académico

</p>

<p id="TextoG2" itemprop="description">2015-2016</p>

</div>

</div>

</div>

Módulo 03 de texto con imagen superior, título y descripción




<div class="fondos">

<a href="http://www.abogadogeneral.ipn.mx/Normatividad/Paginas/Menu_normatividad.aspx"

target="_blank" itemprop="url">

<img class="imagenes" alt="Acta de Consejo Técnico Consultivo Escolar"

src="/sites/NMS/Conocenos/PublishingImages/acta-consejo.jpg" itemprop="image"/>

</a>

</div>

<div class="ContenedorTxt txtCodigo">

<h2>ACTA DEL CONSEJO TÉCNICO CONSULTIVO ESCOLAR</h2>

<div class="Texto">

<p itemprop="description">En el acta de la Cuarta junta Ordinaria del Consejo,..….</p>

</div>

</div>

</div>

</li>

</ul>

</div>

</div>

</center>

</div>

Módulo de texto con imagen superior

Código HTML El título: Deberá de ser con mayúsculas ya que son siglas de diferentes dependencias

o servicios.

La descripción: El texto describirá el servicio o la página a la que hace referencia.

<div class="modulo03 mod3-credencial">

<div>


<img class="imagenes" alt="DESS" src="/sites/NMS/Egresados/PublishingImages/dess.jpg"

itemprop="image"/>

</a></div>


<h2>DESS</h2>

<div class="Texto">

<p itemprop="description">Si quieres conocer los trámites para realizar tu titulación…</p></div>

</div>

</div>

</div>

</div>

Módulo de texto con descripción del responsable


La descripción: El texto dará información importante del título y se deberá incluir en

el campo correspondiente al responsable y su departamento de dicha área.

<div class="zona-completa" id="servicio-academ">

<div class="titulo-azul"><span>Servicios Académicos</span></div>




<div class="dosColumnasB">

<ul>

<li>


<div>


<img class="imagenes" alt="Departamento de Servicios Académicos"

src="/sites/NMS/Docentes/PublishingImages/serv-academicos.jpg" itemprop="image"/>

</a>

</div>

<div class="ContenedorTxt fondo-gris mod-titleh2">

<br/><br/><h2>Departamento de Servicios Académicos</h2>

<br/>

<div class="Texto">

<p itemprop="description">El Departamento de Servicios Académicos…</p>

<p></p>

</div>

</div>

<div class="mod-pie fondo-modulos">

<span>JEFE DE DEPARTAMENTO DE SERVICIOS ACADÉMICOS</span><br/>

<span>LIC. MARCO ANTONIO COJULUN LÓPEZ</span>

Módulo de completo, fondo de zona completa a 3 columnas con texto, vínculo e imagen.

</div>

</div>

</li>

<li>


<div>


<img class="imagenes" alt="Subdirección Académica"

src="/sites/NMS/Docentes/PublishingImages/sub-academica.jpg" itemprop="image"/>

</a>

</div>

<div class="ContenedorTxt fondo-gris mod-titleh2">

<br/><br/><h2>Subdirección Académica</h2>

<br/>

<div class="Texto">

<p itemprop="description">Se encarga de supervisar la compilación de...</p>

</div>

</div>

<div class="mod-pie fondo-modulos">

<span>SUBDIRECCIÓN ACADÉMICA</span><br/>

<span>LIC. NORMA PAULIN PINEA</span>

</div>

</div>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

La descripción: Deberá contener al menos una introducción de la información

correspondiente al título.



<div class="fondo-modulos">


<br/><br/><br/>




<div class="tresColumnas">

<ul>

<li>


<div>


<img class="imagenes" alt="Tutorias"

src="/sites/NMS/Estudiantes/PublishingImages/Servicios/tutorias.jpg" itemprop="image"/>

</a>

</div>


<br/><br/><h2>Tutorias</h2>

<br/>

<div class="Texto">

<p itemprop="description">El Programa Institucional de Tutorías se concibe

como una estrategia que permite organizar la acción tutorial en las Unidades Académicas, por lo que

considera la planeación, organización y evaluación como los ejes rectores para el planteamiento de

acciones de alto impacto que incidan en el proceso de acompañamiento al alumno a lo largo de su

trayectoria escolar.</p>

</div>

</div>

</div>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</div>

Módulo de menú con 4 enlaces diferentes

Código HTML Los enlaces: Llevarán a información clasificada por diferentes títulos que den detalles

de los trámites a realizar para el servicio que se publicará en este módulo.

<div class="moduloBanner">

<ul>



<li id="uno">

<img src="/sites/NMS/Oferta-Educativa/PublishingImages/idiomas.jpg" alt=""/>

</li>

<li id="uno-complemento">

</li>



<li id="dos">

<ul>

<li>

<a href="#">Calendario de lenguas</a>

</li>

<li>

<a href="#">Cartel Lenguas Extranjeras</a>

</li>

<li>

<a href="#">Rompe Barreras y Aprende Otro Idioma</a>

</li>

<li>

<a href="#">Tríptico Infomartivo</a>

</li>

</ul>

</li>

</ul>

</div>

</center>

</div>

Módulo de imagen de PDF

En este ejemplo se utilizaron dos zonas en donde se combinó la imagen y el texto con

viñetas y acompañado de hipervínculos.

Código HTML La imagen: Será distintiva de los archivos en formato PDF.

<div class="ImgeGestion">

<img alt="pdf" src="/sites/NMS/Estudiantes/PublishingImages/pdf.png" itemprop="image"

_moz_resizing="true"/>

</div>


La descripción: El texto tendrá un hipervínculo hacia páginas internas o formatos

descargables.

<div class="ImgeGestion">

<div class="UnaColumnaA listacentrada">

<ul>

<li><a href="#" itemprop="url">Carta de Cumplimiento de Normatividad</a></li>

<li><a href="#" itemprop="url">Solicitud interna de trámite de dictamen</a></li>

<li><a href="#" itemprop="url">Comprobación de no adeudo de material y/o

Equipo</a></li>

</ul>

</div>

</div>

Módulo de texto con hipervínculo e imagen superior

Módulo de 3 columnas para botones auxiliares

Este módulo solo se utiliza en zonas completas, se puede utilizar en otras zonas pero

Deberás de hacer la separación desagregando el código de acuerdo a las necesidades de

las diferentes zonas.

Código HTML La imagen: Deberá de ser referente a la información que se va a publicar en este

espacio.

La descripción: El texto tendrá un hipervínculo hacia la página que haga referencia la

imagen.

<div class="modulo03 mod3-tit">

<div class="centrarImg">

<center><a href="#" itemprop="url"></a></center>

</div>


<div class="Texto">

<p>Si quieres conocer más de este tema ingresa a la siguiente página:</p>

<p><a href="#">Dirección de Egresados y Servicio Dirección de Egresados y Servicio Social</a></p>

</div>

</div>

</div>


Ícono: Que corresponda a la descripción y texto que tendrá cada campo.



<div class="fondo-servi">

<div class="modulo02 servi">



<div class="tresColumnas">

<ul>

<li>

<div class="CentrarContenido becas-mod">

<div>

<div>


<img alt="Atención a la salud"

src="/sites/NMS/Estudiantes/PublishingImages/Servicios/atencion-salud.jpg"

itemprop="image"/></a></div>

<div>

<span>Atención a la salud</span>

</div>

</div>

<p>Preservar la salud y bienestar...</p>

</div>

</li>

<li>


<div>

<div>


<img alt="Orientación juvenil"

src="/sites/NMS/Estudiantes/PublishingImages/Servicios/orientacion-juvenil.jpg" itemprop="image"/>

</a>

</div>

<div>

<span>Orientación juvenil</span>

</div>

</div>

<p>Te brindamos el servicio de asesoría y ...</p>

</div>

</li>

<li>


<div>

<div>


<img alt="Centros de apoyo"

src="/sites/NMS/Estudiantes/PublishingImages/Servicios/centro-apoyo.jpg" itemprop="image"/></a>

</div>

<div>

<span>Centros de apoyo</span>

</div>

</div>

<p>Con el afán por fortalecer tu desarrollo académico, ponemos a tu disposición los

beneficios que te Ofrecen los Centros de Apoyo para Estudiantes y el Centro de Apoyo

Polifuncional</p>

</div>

</li>

</ul></div>

</div>

</div>

</div>

</div>

Módulo de texto con iconografía


La descripción: Deberá tener mayor información correspondiente al título así como

un ícono.






<div class="Texto">


<ul>

<li> <div class="modulo03">

<div>


<img class="imagenes" alt="Guías y Tutoriales"

src="/sites/NMS/Estudiantes/PublishingImages/Servicios/guias-t-1.jpg" itemprop="image"/>

</a>

</div>


<div class="Texto">

<p itemprop="description">Una guía de estudio es una herramienta que ...</p>

</div>

</div>

</div></li>

<li><div class="modulo03">

<div>


<img class="imagenes" alt="Revisión de Examén"

src="/sites/NMS/Estudiantes/PublishingImages/Servicios/rev-ex-1.jpg" itemprop="image"/>

</a>

</div>


<div class="Texto">

<p itemprop="description">El alumno en caso de no estar de acuerdo con el resultado de una

...</p>

</div>

</div>

</div></li>

</ul>

Módulo de directorio

Módulo de texto con botones enmarcados

</div>

</div>

</div>

</div>


La descripción: El texto deberá está justificado a 2 columnas, en la columna izquierda,

se incluirá el nombre y cargo y en la columna derecha se insertará la extensión y/o

correo electrónico.

<div class="encabezado-dir">

<h3>DIRECCIÓN</h3>

</div>

<div class="directorio">

<div class="row ">

<div class="cell col1">

<p>Ing. Germán Garduño Herrera</p>

<p class="sub">Director</p>

</div>

<div class="cell col2">

<p>42048</p>

</div>

</div>

</div>

</div>


La descripción: El texto deberá dar una descripción de lo que se trata el título y

contendrá 6 iconos con su respectivo título cada botón.

<div class="fondo-gris efecto-sombra">

<div class="zona-completa" id="proyecto-aula">



<br/><br/>

<div class="titulo-azul"><span>Proyecto Aula</span></div>

<div class="Texto">

<p itemprop="description">El proyecto Aula es una propuesta didáctica fundamentada en

la solución de problemas, desde los procesos formativos, en el seno de la academia. Desglosemos

esta definición:

</p>

<p>Proyectar es lanzar hacia el infinito. Pensar un acto educativo desde el presente pero

trasladando el pasado para posibilitar futuros. El proyecto se convierte en una guía. Es una acción

intencionada. Es el puente entre el mundo de la vida y el mundo de la escuela.</p>

</div>

</div>

</div>




<div class="tresColumnas servicio-becas proyecto-aula">

<ul>

<li>



<img alt="Protocolo Semestral" src="/sites/NMS/Docentes/PublishingImages/PA1.png"

itemprop="image"/><span>Protocolo Semestral</span></a></div>

</li>

<li>



<img alt="Formatos para Coordinador"

src="/sites/NMS/Docentes/PublishingImages/PA2.jpg" itemprop="image"/><span>Formatos para

Coordinador</span></a></div>

</li>

<li>



<img alt="Formato de Seguimiento"

src="/sites/NMS/Docentes/PublishingImages/PA3.png" itemprop="image"/><span>Formato de

Seguimiento</span></a></div>

</li>

<li>



<img alt="Formato de Proyecto Aula"

src="/sites/NMS/Docentes/PublishingImages/PA4.png" itemprop="image"/><span>Formato de

Proyecto Aula</span></a></div>

</li>

<li>



<img alt="Matriz de Competencia"

src="/sites/NMS/Docentes/PublishingImages/PA5.png" itemprop="image"/><span>Matriz de

Competencia</span></a></div>

</li>

<li>



<img alt="Matriz de Competencia"

src="/sites/NMS/Docentes/PublishingImages/PA6.png" itemprop="image"/><span>Matriz de

Competencia</span></a></div>

</li>

</ul></div>

</div>

</div>

</div>

</div>

</div>

Módulo de acordeón


La descripción: El texto dará detalles del servicio ofertado en cada espacio del

acordeón.


<br/><br/>

<div class="titulo-azul"><span>Servicios</span></div>

<br/><br/>

<div class="ac-container servicios-unidad">



<div>

<input name="accordion-1" id="ac-1" type="checkbox"/>

<label for="ac-1"><img alt="Atención Dental"

src="/sites/NMS/Estudiantes/PublishingImages/Servicios/dental.png"/>Dental</label>



<article class="ac-general">



<div class="descripcion contentxt">

<div class="Texto">

<p>Brindamos atención de primer nivel, dentro de la cual se encuentran los siguientes

tratamientos:</p>

<ul class="UnaColumnaA">

<li>Diagnostico bucal.</li>

</ul>

<p>Horario de atención: de 3PM a 9PM. Atendido por la Dra. Norma Alicia Ruiz

Sánchez.</p>

</div>

</div>

</div>

</div>

</article>

</div>

Módulos que deberán permanecer sin alteraciones debido a su contenido y cumplir con las acciones necesarias para la homologación de la información.

Eventos Institucionales

Módulo de Eventos Institucionales no se podrá modificar ya que será un área que se estará

alimentando desde la Coordinación del Portal Web Institucional.

Curricular del titular

El módulo de titular deberá permanecer sin alteraciones en cuanto a su color y acomodo, y

el contenido deberá corresponder al titular de cada escuela, centro o unidad.

Buscador de información

En el área de la biblioteca no se podrá modificar el buscador de información ya que se tiene

un enlace directo a la base de datos de la CONRICyT (Consorcio Nacional de Recursos de

Información Científica y Tecnológica).

Sección de redes sociales

Las redes sociales deberán hacer referencia a las cuentas institucionales de cada escuela,

centro o unidad previamente autorizadas por la Coordinación de Comunicación Social, en

caso de no estar autorizadas por la Coordinación de Comunicación Social, deberán dejarse

las oficiales del IPN.

Sección de Oferta Educativa

Solo se deberá hacer mención a la oferta educativa con sus objetivos y re direccionar a la

página principal de www.ipn.mx donde estará los contenidos completos, es importante

comentar que las de actualizaciones de la oferta deberán de enviar la información a la DES

o DEMS para que esta se remita a esta Coordinación y se actualice.

http://www.ipn.mx/

Sección de Estructura Orgánica

La Estructura Orgánica deberá ser descargada del repositorio digital dependiendo de cada

escuela, centro o unidad quitando la firma de autorización del director general como el

ejemplo que se muestra en este manual. El nombre del archivo deberá ser con la siguiente

nomenclatura:

Estructura-siglas URL; quedando de la siguiente manera:

Estructura-CECyT1

Estructura-ESIMEAZC.

Pestañas

Este módulo permite la organización de contenidos y proporciona la potencialidad para

mostrar contenido agrupado. Una etiqueta de la ficha describe una agrupación asociada de

la pestaña de contenido.

Modificar la pestaña de Oferta Educativa

Este contenido se realiza cambios desde un archivo HTML, para identificarlos en la parte de

edición web.

Ir a la ruta donde se encuentra el archivo que se va a modificar en SharePoint Designer. Ya

una vez en la ruta del archivo, se desprotege el archivo y se edita en modo avanzado y se

muestra el siguiente código HTML:

Pestañas horizontales:

Para la pestaña 1 (Oferta Educativa)

Modificar las pestañas verticales


<ul class="resp-tabs-list hor_1">

<li>Oferta Educativa</li>

<li>Proceso de Admisión</li>

<li>Convocatoria Vigente</li>

</ul>

Cada etiqueta<li> es una carrera y su contenido corresponde al siguiente código separado

por un comentario del número de carrera.


<ul class="resp-tabs-list ver_1">

<li>Informática</li>

<li>Contaduría</li>

<li>Administración</li>

<li>Administración en Empresas Turísticas</li>

<li>Sistemas Digitales</li>

</ul>


La descripción Será dando detalle del objetivo de la carrera seleccionada.



<div>

<div class="tituloCarrera">

<p>Objetivos

<img itemprop="image"

src="http://www.ipn.mx/ofertaeducativa/PublishingImages/iconos/ing-compu.png" alt="Ingenieria en

computación"/>

</p>

</div>

<br>

<p class="textoCarrera">El objetivo de esta carrera es la formación de Técnicos en

Informática con un alto sentido de responsabilidad y de servicio, para apoyar en las actividades

informáticas de cualquier empresa productiva o de servicios, mediante la adecuada y eficiente

implementación de las Tecnologías de Información.</p>

<div class="irCarrera">

<p>Selecciona una modalidad: </p>

<br>

<a href="http://www.ipn.mx/mediasuperior/Paginas/Tec-Inf.aspx">Escolarizada</a>

<a href="http://www.ipn.mx/mediasuperior/Paginas/Tec-Informatica-NE.aspx">No

Escolarizada</a>

</div>

Modificación de colores en las pestañas:

Además se debe modificar el archivo “Documents/SubMenu/js/easyResponsiveTabs.js”

</div>

Código HTML El color: Será definido en formato hexadecimal.

var colorActivo = '#5f9c7d';//FOND0 PARA TABS ACTIVOS

var colorInactivo = '#F5F5F5';//FOND0 PARA TABS INACTIVOS

Hay que cambiar a los mismos colores que se tiene en el archivo:

“Documents/SubMenu/menuVertical.html”

Modificación de colores en los bordes

Una vez realizado los cambios anteriores se debe modificar el archivo

“Documents/SubMenu/css/easy-responsive-tabs.css” para también modificar los bordes

de las pestañas tanto horizontales como verticales.

Modificación de colores en los bordes de las pestañas horizontales (Oferta Educativa, Proceso de Admisión y Convocatorias):




De la clase “.resp-tab-active” se debe modificar el borde con el color de la pestaña activa de

los siguientes atributos:

Modificación de colores en los bordes de las pestañas verticales (Carreras):

De la clase “.resp-vtabs li.resp-tab-active” se debe modificar el borde con el color de la

pestaña activa de los siguientes atributos:


border: 1px solid #5f9c7d!important;

border-top: 4px solid #5f9c7d!important;


border: 1px solid #5f9c7d!important;

border-top: 4px solid #5f9c7d!important;

Pestaña de Biblioteca

Este contenido se realiza cambios desde un archivo HTML, para identificarlos en la parte de

edición web. Ir a la ruta donde se encuentra el archivo que se va a modificar en Sharepoint

Designer.

Ya una vez en la ruta del archivo, se desprotege el archivo y se edita en modo avanzado y

se muestra el siguiente código HTML:

Modificar las pestañas verticales

Cada etiqueta<li> es una carrera y su contenido corresponde al siguiente código separado

por un comentario de las opciones de cada pestaña.


<ul class="resp-tabs-list hor_1">

<li>Horario de servicio</li>

<li>Contacto</li>

<li>Servicio</li>

<li>Galeria de fotos</li>

</ul>

Horarios:


La descripción Será dando detalle de los horarios de servicios o atención.



<div>

<div class="img-title">

<h3>Horarios de servicio</h3>

</div>




<ul>

<li>Matutino</li>

<li>Vespertino</li>

<li>09:00 a 13:000</li>

<li>17:00 a 19:00</li>

</ul>

</div>

</div>

</div>

</div>

Contacto:


La descripción Será dando datos del contacto responsable del trámite.



<div>

<div class="img-title contacto">

<h3>Contacto</h3>

</div>




<ul>

<li>

<p id="encargado">

<b>Lic. Esteban Hernandez Gomez</b>

</p>

<br>

<p id="encargado">

<b>Reponsable De Servicios

Administrativos</b>

</p>

<br>

<p id="encargado">

<b>Tel. 57296000 Ext. 63665</b>

</p>

</li>

<li>

<p id="encargado">

<b>Lic. Esteban Hernandez Gomez</b>

</p>

<br>

<p id="encargado">

<b>Reponsable De Servicios

Administrativos</b>

</p>

<br>

<p id="encargado">

<b>Tel: 57296000 Ext:65236</b>

</p>

</li>

</ul>

</div>

<div>

</div>

</div>

Servicios:

Galería de fotos:


La descripción Será dando detalle de los servicios referentes al campo.



<div>


<h3>Servicio</h3>

</div>



<div class="tresColumnas serviciosBiblioteca">

<ul>

<li>Catálogo en línea</li>

<li>Consulta en sala con estantería abierta</li>

<li>Préstamo a domicilio</li>

<li>Préstamo interbibliotecario</li>

<li>Préstamo de equipos de cómputo</li>

<li>Asesoría a usuarios</li>

<li>Sala de lectura</li>

<li>Cubículo para estudio en grupo</li>

<li>Conexión WIFI</li>

<li>Ajedrez</li>

<li>Juegos para el desarrollo de habilidades del

pensamiento</li>

</ul>

</div>

</div>

</div>

</div>

<div>


Las imágenes: deberán ser imágenes de resolución óptima para la visualización

adecuada de las mismas en cualquier dispositivo.




<h3>Galería de fotos</h3>

</div>



<div class="tresColumnas imageBiblio">

<ul>

<li>

<img alt="audutorio"

src="/sites/NMS/Estudiantes/PublishingImages/auditorio.jpg" itemprop="image">

</li>

<li>

Modificar el color de fondo

Ir a la ruta en SharePoint donde se encuentra el archivo que se va a modificar, en este caso

“/Estudiantes/Documents/MenuLateral/css/easy-responsive-tabs.css”. Una vez adentro

de la carpeta Menú Lateral, para cambiar el color de fondo hay que entrar a la carpeta CSS

y abrir el archivo easy-responsive-tabs.css, ya ahí se encuentran los estilos de este menú,

se desprotege el archivo y se edita en modo avanzado y se muestra el siguiente código

HTML:

Para modificar el color de fondo exterior a las pestañas se cambia el siguiente estilo en el

id “container” que se encuentra seleccionado en la imagen anterior:

Para modificar el color de fondo del contenido de las pestañas que se muestra a

continuación:



</li>

<li>



</li>

</ul>

</div>

</div>

</div>


background-color: #093d52;

Se debe cambia el siguiente estilo en la clase “.resp-vtabs .resp-tabs-container” que se

encuentra seleccionado en la siguiente imagen:

Modificación de colores en los bordes de las pestañas verticales

Hay que cambiar los mismos colores que se tiene en el archivo

“Documents/SubMenu/menuLateral .html” en la sección inferior en la etiqueta script:


background-color: #8BC34A;

Además de cambiar los mismos colores que se tiene en el archivo

“Documents/SubMenu/css/easy-responsive-tabs.css” para los bordes de la selección:

De la clase “.resp-vtabs li.resp-tab-active” se debe modificar el borde con el color de la

pestaña activa de los siguientes atributos:





border: 1px solid # 093d52!important