Universidad Mariano Glvez de Guatemala

Ingeniera en Sistemas
Sistemas Operativos
Ing. Ricardo Beltrn

Nombres Carnet
Josseline Luca Romn Martnez 0900 11 6552
Jorge Armando Martnez Martnez 0900 08 3046

Guatemala, 28 de Septiembre del 2013

Contenido
Introduccin ........................................................................................................................................ 3
Herramientas Utilizadas ...................................................................................................................... 3
......................................................................................................................... 5
Manual de Usuario para el sistema Simulador de Gestion de Archivos .......................................... 6
Manejo de la aplicacin .................................................................................................................. 6
............................................................................................................................................... 9
Cdigo utilizado en la aplicacin ....................................................................................................... 10
References:.................................................................................................................................... 10
Codigo General: ............................................................................................................................. 11
Codigo HTML: ................................................................................................................................ 15
Introduccin
Un administrador de archivos, gestor de archivos o explorador de archivos es una aplicacin
informtica que provee acceso a archivos y facilita el realizar operaciones con ellos, como copiar,
mover, eliminar archivos donde el usuario lo quiera ubicar y poder ingresar a ellos para realizar
ciertas tareas.

Los primeros gestores de archivos fueron creados para sistemas operativos con interfaces de
usuario de smbolos (no grficos). Estos gestores de archivos generalmente representaban las
unidades, particiones y directorios en su distribucin fsica real y permitan un nmero limitado de
operaciones sobre estos recursos. El primer gestor de archivos visual que se desarroll (aunque
an en modo texto) fue Dired, que sent las bases para los gestores de archivos que surgieron a
continuacin. Con el advenimiento de las interfaces, los gestores de archivos adquirieron
diferentes funcionalidades, como la habilidad de asociar tipos de archivos a programas, y
facilitaron la comprensin de conceptos mediante la representacin grfica de cada recurso,
identificado con un icono.

Herramientas Utilizadas
El desarrollo de la aplicacin Simulador de Gestin de Archivos se realiz con la herramienta
Jquery, la cual es una herramienta fcil de manejar, rpida y pequea. Se pueden realizar cosas
similares a los documentos de HTML, as como la manipulacin, el control de eventos, animacin
y Ajax que es mucho ms simple con un API fcil de usar que funciona a travs de una multitud
de navegadores. Con una combinacin de flexibilidad y extensibilidad, jQuery ha cambiado la
forma en que millones de personas escriben JavaScript. As tambin se utiliz Angular Js que es
un framework de JavaScript de cdigo abierto, mantenido por Google, que ayuda con la gestin de
lo que se conoce como aplicaciones de una sola pgina. Su objetivo es aumentar las aplicaciones
basadas en navegador con (MVC) Capacidad de Modelo Vista Controlador, en un esfuerzo para
hacer que el desarrollo y las pruebas ms fciles.

Otra herramienta utilizada fue Amplify Js su objetivo es simplificar todas las formas de manejo de
datos, proporcionando una API unificada para diversas fuentes de datos. Componente de almacn
de amplificacin se encarga de almacenamiento persistente del lado del cliente, utilizando
estndares como localStorage y sessionStorage, pero caer en implementaciones no estndar para
navegadores antiguos.
Para el diseo de dicha aplicacin se utiliz una herramienta llamada Bootstrap, es un marco
frontal elegante, intuitivo y de gran alcance para un desarrollo web ms fcil y rpido.
Esta herramienta posee diferentes estilos y efectos (basados en jquery) los cuales crean una
interfaz ms agradable al usuario.

Para la creacin y manejo de archivos se utiliz el lenguaje PHP.

Manual de Usuario para el sistema Simulador de
Gestion de Archivos

Manejo de la aplicacin
Estando dentro de la aplicacin se mostrar la siguiente pantalla:

Para agregar o guardar un archivo deber realizar los siguientes pasos:

1. Nombre de archivo: Ingrese nombre del archivo

2. Contenido del Archivo: Ingrese el contenido que llevar el archivo nombrado

3. Luego de haber ingresado todos los datos, deber presionarse el botn Save, el cual
agregara el archivo a la tabla de locacion y asignara los espacios que ocupara en el disco

duro virtual.
 4. Al haber agregado el archivo tambin se pintaran en una matriz los espacios que este
ocupara en el disco duro.

5. As mismo tendremos una barra de progreso en la cual se mostrar la disponibilidad del

disco duro, tal como se muestra:

En la tabla de locacin de Archivos tenemos las siguientes opciones:

Delete: Para eliminar un archivo solo se presiona el botn , esto eliminara de la

tabla de locacin y los sectores.

Rename: Esta opcin permitir renombrar el archivo ingresado, para ello deber presionar

el botn , y se mostrar la siguiente ventana:

 En esta ventana podr renombrar el archivo ingresando el nuevo nombre en el cuadro de
texto y presionando el botn Save Changes.

View: Esta opcin permitir mostrar el detalle del nombre y contenido del archivo, para

ello deber presionar el botn: , y se mostrar la siguiente ventana:

Para ver una demostracin de la utilizacin de la aplicacin, puede ingresar al siguiente link:

http://youtu.be/xXjPq-qoe78
Cdigo utilizado en la aplicacin

References:
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-bootstrap.min.js"></script>
<script src="js/amplify.min.js"></script>
<script src="js/app-controllers.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen" />
<link href="css/app.css" rel="stylesheet" media="screen" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/json2.min.js"></script>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
Codigo General:
<script type="text/javascript">

jQuery(function() {

jQuery("#save").click( function(){

var nameFile = jQuery("#nameFile").val();

var text = jQuery("#text").val();

if ((nameFile!="")&&(text!="")) {

var parametros = {

"nameFile":nameFile,

"texto":text

};

jQuery.ajax({

data: parametros,

url: 'simulador.php',

type: 'post',

dataType: "json",

success: function (response) {

$("#fat").html(response.files);

// $("#resultado").html(response.errorMensaje);

$("#sectores").html(response.disk);

$("#bar").html(response.bar);

jQuery("#nameFile").val("");
 jQuery("#text").val("");

jQuery("#nameFile").focus();

});

} else {alert("Datos Incorrectos");}

});

jQuery("#btn-saveRename").click( function(){

var nameFile = jQuery("#fileRenamed").val();

var file = jQuery("#idfile").val();

var parametros = {

"nameFile":nameFile,

"file":file

};

jQuery.ajax({

data: parametros,

url: 'rename.php',

type: 'post',

dataType: "json",

beforeSend: function () {

},

success: function (response) {

$("#fat").html(response.files);

$("#myModal").modal('hide')
 }

});

});

});

function deleteFile(file) {

var parametros = {

"file":file,

};

jQuery.ajax({

data: parametros,

url: 'delete.php',

type: 'post',

dataType: "json",

beforeSend: function () {

},

success: function (response) {

$("#fat").html(response.files);

$("#sectores").html(response.disk);

$("#bar").html(response.bar);

});

function renameFile(file, name) {

$("#myModal").modal();

$("#fileRenamed").val(name);

$("#idfile").val(file);

function viewFile(fatIndex, name) {

var parametros = {

"fatIndex":fatIndex

};

jQuery.ajax({

data: parametros,

url: 'view.php',

type: 'post',

dataType: "json",

beforeSend: function () {

},

success: function (response) {

$("#myModal2").modal();

$("#textview").html(response.texto);

$("#titulotext").html(name);

});

}
Manipulacin de Archivos
Archivos PHP: file.php, simulador.php, rename.php, view.php, delete.php

Codigo HTML:
<body>
<div class="panel panel-primary content-wrap">

<div class="panel-heading">
<h2>Sistema de Archivos</h2>
</div>
<br/>
<br/>

<div class="subcontent">
<div class="container" ng-controller="TestController">

<div class="row">
<form action="#" id="archivo" class="form">
<div class="col-lg-3">
<input id="nameFile" type="text" class="form-control" placeholder="Nombre Archivo">
<br/>
<div style="width:800px">
<textarea id="text" class="form-control" rows="3"></textarea>
</div>
<br/>
<button id ="save" type="button" class="btn btn-success">
<span class="glyphicon glyphicon-floppy-disk"></span>
Save
</button>
</div>
</form>
</div>
<div id="bar">
<?php
include_once("file.php");

$dom = new FileProyect();

$dom->fileDrive = "Disco.txt";
$dom->get_content();
echo $dom->barDisk();
?>
 </div>

<div id="fat" class="row">

<?php
echo $dom->getFiles();
?>
</div>
<legend><h3>Sectores</h3></legend>
<div id="sectores" class="row sectores">
<?php
echo $dom->paintDisk();
?>
</div>

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

</div>
</div>

<!-- Modal -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">&times;</button>
<h4 class="modal-title">Rename File</h4>
</div>
<div class="modal-body">
<input type="hidden" id="idfile" value="">
<input id="fileRenamed" type="text" class="form-control" placeholder="Nombre Archivo">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btn-saveRename"type="button" class="btn btn-primary">Save
changes</button>
</div>
</div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Modal -->

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">&times;</button>
<h4 id="titulotext"class="modal-title"></h4>
</div>
<div class="modal-body">

<div class="panel panel-default">

<div id="textview" class="panel-body">
Panel content
</div>
</div>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>