GitHub - coingod/Builder-IAW: Proyecto 1 - Ingenieria de Aplicaciones Web

Branches Tags

Name		Name	Last commit message	Last commit date
Latest commit History 64 Commits
.vscode		.vscode
css		css
fonts/roboto		fonts/roboto
img		img
js		js
example.json		example.json
index.html		index.html
readme.html		readme.html

Repository files navigation

<!DOCTYPE html>
<head><meta charset="utf-8"> </head>
<body>
	<h1> Builder </h1>
	<h2> Qué es? </h2>
	<p>
	Builder es una aplicación web que corre sobre cualquier navegador
	en la que se le presenta la posibilidad de diseñar una ciudad en dos 
	dimensiones, utilizando elementos comunes a las mismas: rutas, edificios, 
	personas, naturaleza... Estos mismos pueden ser reemplazados por elementos 
	que usted requiera, siempre y cuando respete los formatos utilizados
	por la aplicación. Tambien se le presentan distintas herramientas para
	personalizar: mover el mapa, cambiar la hoja de estilos, 
	exportar el mapa en el que está trabajando para poder importarlo en otra
	sesión y continuar su trabajo.
	</p>
	<h2> Funcionalidad </h2>

	<h3> Dibujado </h3>
	<p>
	Para dibujar elementos en el mapa dirijase al sector izquierdo de la
	aplicacion y clickee sobre el elemento que quiera dibujar, luego mueva
	su cursor hacia el mapa, verá la selección actual algo transparente, 
	clickee sobre la grilla donde desea colocar el elemento para que quede
	definitivamente en la misma. 
	</p>
	<h3> Categorias </h3>
	<p>
	Los elementos estan divididos en categorías para que sea más simple 
	encontrar los que desee: cambie de categoría clickeando sobre los 
	iconos debajo del titulo "categorias". 
	</p>
	<h3> Capas </h3>
	<p>
	Tambien puede cambiar de capas, las mismas se encuentran debajo de los
	elementos y por defecto hay 2. La capa resaltada es sobre la que se 
	esta dibujando, y el orden en el que aparecen es en el orden en el que
	se dibujan en el canvas: si quiere dibujar un arbol sobre terreno verde
	debe dibujar el terreno verde en la capa actual, y luego cambiar a una
	capa superior (mas abajo en la lista) y dibujar el arbol. La capa que
	está actualmente seleccionada se encuentra resaltada en la lista. 
	</p>
	<p>
	Puede eliminar capas clickeando sobre el icono de borrar al lado del 
	nombre de la misma, y tambien puede ocultarlas/mostrarlas con el ícono 
	de visibilidad que se encuentra junto al de borrado.
	</p>
	<p>
	Agregue una capa nueva presionando el boton "+" junto al título "Capas".
	</p>
	<h3> Canvas </h3>
	<p>
	Por defecto, al presionar el mouse sobre un espacio vacio en el canvas,
	estará dibujando un elemento si es que tiene uno seleccionado. 
	</p>
	<p>
	También puede mover el canvas de posición si lo cree conveniente, 
	abajo a la derecha de la aplicación se elegi la herramienta actual
	de interaccion con el canvas: Por defecto está el lapiz seleccionado, indica
	que se está dibujando, si selecciona la mano, podrá mover el canvas. 
	Vuelva a seleccionar el lapiz para continuar dibujando.
	Presionando sobre el boton de herramienta oculta los dos botones mencionados.
	</p>
	<h2> Menú Opciones </h2>
	<h3> Mapa </h3>
	<p>
	Puede borrar el mapa actual y comenzar de 0 seleccionando la opcion "Nuevo mapa". 
	Se le solicitara las dimensiones del nuevo mapa, en filas y columnas.
	El tamaño por defecto de los elementos es de 64x64 pixeles.
	</p>
	<p>
	Seleccione importar para seleccionar un archivo json que haya exportado
	en la aplicación previamente. Una vez que haya importado, debera volver
	a seleccionar una de las categorías para continuar dibujando elementos.
	</p>
	<p>
	Seleccione exportar para descargar un archivo json con la información
	del mapa que esta modificando actualmente.
	Se almacenaran las capas junto con los datos de cada una, y ademas
	se guardara el conjunto de categorias que se esta utilizando con la
	informacion de la imagen (tileset) asociado. Es posible modificar
	los tileset que utilizara la aplicacion modificando el json.
	La aplicacion no cuenta actualmente con metodos para cambiar las
	categorias, esta funcionabilidad sera agregada en un futuro.
	</p>
	<h3> Interfaz </h3>
	<p>
	Cambie de interfaz entre "Light" y "Dark" a su preferencia, por defecto
	se utiliza "Light". El navegador recordara su seleccion.
	</p>
	<h2> Librerías </h2>
	<p>
	Librerías utilizadas por la aplicación:
	</p>
	<p>
	# jQuery - <a href="https://jquery.com/">https://jquery.com/</a> Para simplificar el manejo de HTML y eventos.
	</p>
	<p>
	# jQuery UI - <a href="https://jqueryui.com/">https://jqueryui.com/</a> Manejo de rueda del mouse y barras de 
	navegación
	</p>
	<p>
	# Materialize - <a href="http://materializecss.com/">http://materializecss.com/</a> Utilizada para la realización de 
	las interfaces.
	</p>
	<p>
	# Require - <a href="http://requirejs.org/">http://requirejs.org/</a> Utilizada para simplificar la modularizacion, carga de librerias y velocidad de la aplicacion.
	</p>
	<h2> Agradecimientos </h2>
	<p>
	Los elementos utilizados para dibujar (edificios, caminos, etc), fueron
	creados por un usuario del sitio Open Game Art: https://opengameart.org/users/kenney
	</p>
	<h2> Autores </h2>
	<p> del Barrio, Ignacio </p>
	<p> Menchi, Lucas </p>
</body>