<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://use.fontawesome.com/15deb57482.js"></script>
</head>
<header>
<div class="container">
<div class="col-xs-12 col-sm-6 col-sm-offset-3">
<div class="alert alert-info vertical-center">
<p>En el presente manual se describe la forma de operar el Módulo de Registro de Visitas el cual tiene como objetivo llevar el control de los registros de entradas y salidas, movimientos de personal y la consulta de los catálogos. </p>
</div>
</div>
</div>
</header>
<div class="container">
<div class="hidden-xs col-sm-3">
<div class="fading-side-menu" data-spy="affix" data-offset-top="350">
<h5>Contenido</h5><hr class="no-margin">
<ul class="list-unstyled">
<li>
<a href="#contra">
<span class="fa fa-angle-double-right text-primary"></span>Cambio de Contraseña
</a>
</li>
<li>
<a href="#principal">
<span class="fa fa-angle-double-right text-primary"></span>Menú Principal
</a>
</li>
<li>
<a href="#registro">
<span class="fa fa-angle-double-right text-primary"></span>Menú de Registro de Visitas
</a>
</li>
<li>
<a href="#catalogos">
<span class="fa fa-angle-double-right text-primary"></span>Catálogos
</a>
</li>
<li>
<a href="#visitas">
<span class="fa fa-angle-double-right text-primary"></span>Registro de Visitas Pendientes
</a>
</li>
<li>
<a href="#entradas">
<span class="fa fa-angle-double-right text-primary"></span>Registro de Entradas
</a>
</li>
<li>
<a href="#salidas">
<span class="fa fa-angle-double-right text-primary"></span>Registro de Salidas
</a>
</li>
<li>
<a href="#reportes">
<span class="fa fa-angle-double-right text-primary"></span>Reportes
</a>
</li>
<li>
<a href="#personal">
<span class="fa fa-angle-double-right text-primary"></span>Movimentos de Personal
</a>
</li>
<li>
<a href="#salir">
<span class="fa fa-angle-double-right text-primary"></span>Salir del Sistema
</a>
</li>
</ul>
</div>
</div>
<!-- THIS IS NOT NEEDED, THIS IS JUST THE CONTENT OF THE DEMO -->
<div class="col-xs-12 col-sm-9">
<p class="small text-muted">Realizado el 18 de Mayo de 2017</p>
<h2 id="principal" class="title">Manual de Registro de Visitas</h2>
<h2 id="contra">Cambio de Contraseña</h2>
<p>Es de suma prioridad que al momento en que al usuario se le asigne la contraseña para el ingreso al sistema realice el cambio de la misma. Para poder lograrlo, al momento de ingresar al sistema se dará clic en "Cambio de Contraseña". Al momento el sistema desplegará una ventana en la cual le solicitará que ingrese la contraseña actual que dispone, después deberá ingresar la nueva contraseña, al momento de ingresarla, en el cuadro siguiente deberá de confirmar la contraseña nuevamente. Al momento de realizarlo se le dará clic al botón "Guardar cambios".</p>
<p>Se recomienda que al momento de generar su nueva contraseña la anote en un lugar seguro donde pueda accesarla las veces que lo requiera. Esto para evitar que se olvide.</p>
<br><p align="center"><img src="https://image.ibb.co/dAFcAv/Sin_t_tulo.jpg" alt="Sin_t_tulo" border="3px" width="90%"></p>
<h2 id="principal">Menú Principal</h2>
<p>Al acceder al sistema por medio de la validación de usuario y contraseña, se muestran los diferentes módulos que se encuentran disponibles para su uso. Una vez aceptado el usuario, se desplegará la ventana que permitirá el ingreso al “Registro de Visitas”, dando un click (con el botón izquierdo del mouse) sobre el nombre.</p>
<br><p align="center"><img src="https://image.ibb.co/hstOCa/Menu.jpg" alt="Menu" border="4" width="90%"></p>
<h4 id="registro">Menú de Registro de Visitas</h4>
<p>Una vez ingresado dentro del sistema aparecerán las siguientes opciones que se pueden realizar dentro del mismo, dependiendo de las actividades que se deseen realizar se igresará a la opción deseada.</p>
<br><p align="center"><img src="https://image.ibb.co/mwi1yF/Menu_Registro.jpg" alt="Menu Registro" border="4" width="90%"/></p>
<p align="center"><h2 id="catalogos">Catálogos</h2>
<p>Después de dar un click sobre la pestaña “Catálogos”, se despliega esta ventana la cual permite realizar la administración de los catálogos, (solo personal autorizado). Se podrá dar de alta cualquier dato que se requiera y no lo contemple dicho catálogo o bien se podrá dar de baja si no corresponde o se encuentra de más. Los datos que se podrán corregir serán en: Personal de la CDH, Asunto, Tipo de identificación, Calidad de la visita y Gafetes. </p>
<p>En las bajas se tendrá que dar un click sobre el recuadro de la izquierda para que se marque y posteriormente otro en la parte baja en el texto Dar de baja. </p>
<ul>
<li>Si selecciona el icono de <b>PERSONAL CDH</b> <i>en alta</i> se muestra la siguiente información, dar clic en el botón <b>Ingresar</b></li>
<li>Para dar de baja algún dato del sistema seleccionar claramente el recuadro que sea el correcto, si el dato es el correcto, dar clic en botón "Dar de baja"</li>
<li>Si selecciona el icono de <b>ASUNTO</b> <i>en alta</i> se muestra la información "Alta de Asuntos". Al ingresar el nombre de la persona en los catálogos dar clic en el botón. "Ingresar"</li>
<li>Para dar de baja algún dato del sistema seleccionar claramente el recuadro que sea el correcto y dar clic en el botón. "Dar de baja"</li>
<li>Si selecciona el icono de <b>TIPO DE IDENTIFICACIÓN</b> <i>en alta</i> se muestra la siguiente información. Teclear el nombre de la persona y dar clic en botón, asi quedará dada de alta esta persona.</li>
<li>Para dar de baja algún dato del sistema seleccionar claramente el recuadro que sea el correcto, si es correcto el dato dar clic en botón. "Dar de baja"</li>
<li>Si selecciona el icono de <b>CALIDAD DE LA VISITA</b> <i>en alta</i> se muestra la siguiente información, solo ingresar el nombre de la persona que se requiere dar de alta en el sistema y dar clic en botón</li>
<li>Para dar de baja algún dato del sistema seleccionar claramente el recuadro que sea el correcto y dar clic en botón "Dar de baja"> asi el dato que fue seleccionado será dado de baja del sistema.</li>
<li>Si selecciona el icono de <b>GAFETES</b> <i>en alta</i> se muestra la siguiente información, es necesario seleccionar el área a donde va dirigido y teclear el número del gafete ya que la información es la correcta, dar clic en botón. "Ingresar"</li>
<li>Si selecciona en <b>GAFETES</b> en el campo de ÁREA se muestra la siguiente información, se tiene que seleccionar un campo de los que se muestran.</li>
</ul>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-content1 w3-display-container">
<div class="w3-display-container mySlides">
<br><p align="center"><img src="https://image.ibb.co/dVjkQv/Men_Cat_logos.jpg" alt="Men Cat logos" border="4" width="90%">
<div class="w3-display-bottomright w3-large w3-container w3-padding-13 w3-black">
Menú de Catálogos
</div>
</div>
<div class="w3-display-container mySlides">
<br><p align="center"><img src="https://image.ibb.co/iqKPJF/catalagos_alta_de_personas.gif" alt="catalagos alta de personas" border="0" style="width:90%">
<div class="w3-display-bottomright w3-large w3-container w3-padding-13 w3-black">
Registro Personal CDH
</div>
</div>
<div class="w3-display-container mySlides">
<br><p align="center"><img src="https://image.ibb.co/ccnN5v/catalagos_cambios.gif" alt="catalagos cambios" border="4" style="width:90%">
<div class="w3-display-bottomright w3-large w3-container w3-padding-13 w3-black">
Dar de Baja Personal
</div>
</div>
<div class="w3-display-container mySlides">
<br><p align="center"><img src="https://image.ibb.co/ng20sa/catalagos_alta_asuntos.gif" alt="catalagos alta asuntos" border="0" style="width:90%">
<div class="w3-display-bottomright w3-large w3-container w3-padding-13 w3-black">
Alta de Asuntos
</div>
</div>
<div class="w3-display-container mySlides">
<br><p align="center"><img src="https://image.ibb.co/cquPJF/catalagos_baja_asuntos.gif" alt="catalagos baja asuntos" border="0" style="width:90%">
<div class="w3-display-bottomright w3-large w3-container w3-padding-13 w3-black">
Baja de Asuntos
</div>
</div>
<div class="w3-display-container mySlides">
<br><p align="center"><img src="https://image.ibb.co/jVn0sa/catalagos_alta_identificacion.gif" alt="catalagos alta identificacion" border="0" style="width:90%">
<div class="w3-display-bottomright w3-large w3-container w3-padding-13 w3-black">
Tipo de Identificación
</div>
</div>
<div class="w3-display-container mySlides">
<br><p align="center"><img src="https://image.ibb.co/dcyUkv/catalagos_baja_identificacion.gif" alt="catalagos baja identificacion" border="0" style="width:90%">
<div class="w3-display-bottomright w3-large w3-container w3-padding-13 w3-black">
Baja de identificación
</div>
</div>
<div class="w3-display-container mySlides">
<br><p align="center"><img src="https://image.ibb.co/dMxN5v/catalagos_alta_visitante.gif" alt="catalagos alta visitante" border="0" style="width:90%">
<div class="w3-display-bottomright w3-large w3-container w3-padding-13 w3-black">
Alta de Calidad Visitante
</div>
</div>
<div class="w3-display-container mySlides">
<br><p align="center"><img src="https://image.ibb.co/evuPJF/catalagos_baja_visitante.gif" alt="catalagos baja visitante" border="0" style="width:90%">
<div class="w3-display-bottomright w3-large w3-container w3-padding-13 w3-black">
Baja de Calidad de Visitante
</div>
</div>
<div class="w3-display-container mySlides">
<br><p align="center"><img src="https://image.ibb.co/bHjfsa/catalagos_alta_gafetes.gif" alt="catalagos alta gafetes" border="0" style="width:90%">
<div class="w3-display-bottomright w3-large w3-container w3-padding-13 w3-black">
Alta de Gafetes
</div>
</div>
<div class="w3-display-container mySlides">
<br><p align="center"><img src="https://image.ibb.co/hdUDCa/catalagos_listado.gif" alt="catalagos listado" border="0" style="width:90%">
<div class="w3-display-bottomright w3-large w3-container w3-padding-13 w3-black">
Baja de Tipos de Gafetes
</div>
</div>
<button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">❯</button>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
<h2 id="visitas">Registro de Visitas Pendientes</h2>
<p>Para registrar una visita que este pendiente, lo primero que se debe de hacer es determinar su procedencia, sea el caso adecuado se escagerá si es visitante de la PGJ, externo o de la CDH. Teniendo el origen de la visita se ingresarán los datos que solicite el sistema, Nombre, Apellido Paterno y Apellido Materno</p>
<p>Habiendo llenado los campos requeridos se le dará clic en el botón <input type="button" value="Busqueda">. El botón "Limpiar" sirve para vaciar los datos que estan en los campos.</p>
<br><p align="center"><img src="https://image.ibb.co/i4S63F/registrode_entrada.gif" alt="registrode_entrada" border="0" style="width:90%">
<ul>
<li>Al momento de dar clic en el botón búsqueda se muestra la información del empleado, al ser buscado y encontrado dentro del sistema de información, se muestra la información como en la siguiente pantalla. </li>
<br><p align="center"><img src="https://image.ibb.co/kr6kVv/busqueda_en_registro.gif" alt="busqueda_en_registro" border="0" style="width:90%">
<li>Al momento de dar clic en el nombre de la persona encontrada se muestra los datos de esta misma persona como en la pantalla.</li>
<br><p align="center"><img src="https://image.ibb.co/dhKuOF/nombre.gif" alt="nombre" border="0" style="width:90%">
<li>Si la persona que desea ingresar, no fue encontrada, dar clic en el enlace <b><u>En caso de no localizar al empleado, deberá darlo de alta Aquí.</u></b></li>
<br><p align="center"><img src="https://image.ibb.co/iX0OHa/no_localizado.gif" alt="no_localizado" border="0" style="width:90%">
</ul>
<h2 id="entradas">Registro de Entradas</h2>
<p>Al momento de ingresar una salida pendiente y no ubicando a la persona deseada se le da clic en el link "Dar de alta Aqui", seleccionando esa opción se habrá ingresado al menú de entrada en donde pedirá los datos de la persona que se desea ingresar. Esta formulario se divide en tres partes importantes:</p>
<ul>
<li><b>Registro:</b> los datos que solicitará este apartado dependerá de la procedencia de la persona, los cuales se tendrán que capturar.</li>
<li><b>Datos de la visita:</b> se capturarán entre otros, el número de la Averiguación Previa, el asunto, el área y la persona que se visita.</li>
<li><b>Carga de la fotografía:</b> se toma e incorpora la fotografía.</li>
</ul>
<p>Una vez capturados todos los datos necesarios se le dará clic en el botón: Registrar Visita" esto para ingresar los datos de entrada de la persona y poderlos ubicar después.</p>
<br><p align="center"><img src="https://image.ibb.co/mNHxtF/registro_nuevo.gif" alt="registro nuevo" border="0" style="width:90%">
<h2 id="salidas">Registro de Salidas</h2>
<p>Para poder registrar una salida, previamente se debió de registrar una visita. En dado caso de que la visita no se haya registrado no aparecerán datos, mostrando el sistema el siguiente mensaje.</p>
<br><p align="center"><img src="https://image.ibb.co/cf0xSa/Salidas.jpg" alt="Salidas" border="0" style="width:90%"/>
<h2 id="reportes">Reportes</h2>
<p>Después de dar un click sobre la pestaña “Reportes”, se despliega esta ventana la cual permite obtener los reportes. Se presentan dos tipos de reportes por Detalle y Cifras. Para poder generar el reporte, se da un click al círculo que se encuentra en la parte izquierda de los textos y posteriormente en seleccionar.<b>"Imagen 1"</b></p>
<ul>
<li>Ya seleccionado el reporte Detalles, se despliega esta pantalla y se capturan los datos solicitados, ya que se tienen, se da un click en generar reporte. <b>"Imagen 2"</b></li>
<li>En la parte baja se desplegará el reporte, el cual mostrará a detalle la información de cada persona que haya visitado</li>
<li>Si se desea visualizar los datos de una persona en específico, se dará clic izquierdo en el botón de la persona en la parte de detalle. <b>"Imagen 3"</b></li>
<li>Habiendo seleccionado a la persona deseada se desplegará sus datos a detalle incluyendo la foto. <b>"Imagen 4"</b></li>
</ul>
<p>Ya seleccionado el reporte Cifras, se despliega esta pantalla que presenta siete opciones para escoger, se selecciona una opción se digita la fecha y se da un click en generar reporte. <b>"Imagen 5"</b></p>
<ul>
<li>En la parte baja se desplegará el reporte, el cual mostrara de forma general y de acuerdo al dato solicitado las cantidades. <b>"Imagen 6"</b></li>
</ul>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none}
</style>
<div class="w3-content" style="max-width:800px">
<br><p align="center"><img class="mySlides1" src="https://image.ibb.co/keZbYF/reportes.gif" alt="reportes" border="0" style="width:90%">
<br><p align="center"><img class="mySlides1" src="https://image.ibb.co/fCpofv/reporte_detalle.gif" alt="reporte detalle" border="0" style="width:90%">
<br><p align="center"><img class="mySlides1" src="https://image.ibb.co/cDo3DF/reporte_resultado.gif" alt="reporte resultado" border="0" style="width:90%">
<br><p align="center"><img class="mySlides1" src="https://image.ibb.co/mtYQSa/detalle_foto.gif" alt="detalle foto" border="0" style="width:90%">
<br><p align="center"><img class="mySlides1" src="https://image.ibb.co/bSGZLv/reporte_cifra.gif" alt="reporte cifra" border="0" style="width: 90%">
<br><p align="center"><img class="mySlides1" src="https://image.ibb.co/gEKofv/reporte_resultado_cifras.gif" alt="reporte resultado cifras" border="0" style="width 90%">
</div>
<div class="w3-center">
<div class="w3-section">
<button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button>
<button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button>
</div>
<button class="w3-button demo" onclick="currentDiv(1)">1</button>
<button class="w3-button demo" onclick="currentDiv(2)">2</button>
<button class="w3-button demo" onclick="currentDiv(3)">3</button>
<button class="w3-button demo" onclick="currentDiv(4)">4</button>
<button class="w3-button demo" onclick="currentDiv(5)">5</button>
<button class="w3-button demo" onclick="currentDiv(6)">6</button>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides1");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-red", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-red";
}
</script>
<h4 id="personal">Movimientos de personal</h4>
<p>Este módulo se habla del movimiento de personal, se tiene que seleccionar el área del empleado en donde se encuentra actualmente trabajando también se tiene que seleccionar la unidad de Investigación del mismo empleado, y se tiene que teclear el número de empleado dar clic en el botón. "Buscar"</p>
<br><p align="center"><img src="https://image.ibb.co/gittDF/movimientos_de_personal.gif" alt="movimientos de personal" border="4" style="width:90%"/></p>
<h4 id="salir">Salida del Sistema</h4>
<p>Para poder salir del sistema se dará clic al botón <i>Salir</i> que se encuentra en la parte de arriba de la pantalla. Al momento de realizar la acción el sistema irá a la opción de ingreso de usuario y contraseña, con esto el usuario habrá cerrado correctamente su sesión.</p>
<p align="center"><img src="https://image.ibb.co/fc0Zav/entrada.jpg" alt="entrada" border="0" style="width:90%"></p>
</div>
</div>
<a href="https://172.40.96.57/" class="btn btn-primary btn-lg" id="fullscreen" data-toggle="tooltip" data-placement="left" title="Regresa"><span class="fa fa-arrows-alt"></span></a>
</html>
/* FOR DEMO ONLY */
/* Import Bootswatch paper theme because it isn't provided by Bootsnipp and it is awesome! */
@import url(//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.4/paper/bootstrap.min.css);
@import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css);
/* WHAT YOU NEED */
.fading-side-menu.affix-top {
opacity: 1;
transition: opacity 1s
}
.fading-side-menu.affix {
top: 11.5px;
}
.fading-side-menu.affix {
opacity: 0.2;
transition: opacity 5s
}
.fading-side-menu.affix:hover {
opacity: 1;
transition: opacity 0.3s
}
/* RECOMMENDED STYLING BUT NOT REQUIRED */
.fading-side-menu a {
color: rgb(102, 102, 102);
}
.fading-side-menu a .fa {
padding-right:15px;
}
/* FOR DEMO ONLY */
body {
background-color: rgb(255, 255, 255);
font-size: 16px;
}
header {
background: url('https://unsplash.imgix.net/photo-1427955569621-3e494de2b1d2?fit=crop&fm=jpg&h=700&q=75&w=1050') no-repeat center bottom;
background-size: cover;
margin-bottom: 30px;
min-height: 320px;
overflow: hidden;
position: relative;
width: 100%;
}
header:after {
bottom: 0px;
box-shadow: 0px -0px 10px 10px rgb(255, 255, 255);
content: '';
height: 0px;
left: 0px;
width: 100%;
position: absolute;
}
header .col-xs-12 {
height: 320px;
}
header .alert-info {
background-color: rgba(156, 39, 176, 0.7);
}
.title {
font-weight: 700;
margin-top: 0px;
}
p.small.text-muted {
margin-bottom: 0px;
}
.lead {
font-style: italic;
}
.no-margin {
margin: 0px !important;
}
.vertical-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#fullscreen {
position: fixed;
top: 10px;
right: 10px;
}
/* THOUGH THIS PLUGIN DOES NOT CONTAIN
ANY JAVASCRIPT ITSELF, IT DOES REQUIRE
THE BOOTSTRAP AFFIX PLUGIN. */
/* START OF DEMO JS - NOT NEEDED */
$(function () {
if (window.location == window.parent.location) {
$('#fullscreen').html('<span class="fa fa-compress"></span>');
$('#fullscreen').attr('href', 'http://bootsnipp.com/mouse0270/snippets/rVnOR');
$('#fullscreen').attr('title', 'Back To Bootsnipp');
}
$('#fullscreen').on('click', function(event) {
event.preventDefault();
window.parent.location = $('#fullscreen').attr('href');
});
$('#fullscreen').tooltip();
});
/* END DEMO OF JS - THAT IS RIGHT NO ADDITONAL JAVASCRIPT NEEDED FOR THIS SNIPPET */
