Anteproyecto CAAD Con APA

1

DESARROLLO DE UN PROTOTIPO COMPUTER-AIDED ARCHITECTURAL DESIGN

BIDIMENSIONAL EN HTML5 IMPLEMENTANDO SCALABLE VECTOR GRAPHICS

CON DOCUMENT OBJECT MODEL

Presentado por

Jeisson Hernán Malaver Gómez

Director

Ing. Esaú Paloma Parra

Docente Tiempo Completo Ocasional

Universidad de Cundinamarca

Ingeniería de Sistemas

Fusagasugá

2014

DESARROLLO DE UN PROTOTIPO CAAD 2D EN HTML5 2

CONTENIDO

Resumen..........................................................................................................................................4

Introducción.....................................................................................................................................5

1 Marco General.........................................................................................................................61.1 Tipo de Proyecto......................................................................................................61.2 Línea de Investigación.............................................................................................6

2 Planteamiento del Problema....................................................................................................72.1 Descripción y Antecedentes del Problema..............................................................72.2 Formulación del Problema.......................................................................................7

3 Justificación.............................................................................................................................8

4 Objetivos..................................................................................................................................94.1 Objetivo General......................................................................................................94.2 Objetivos Específicos..............................................................................................9

5 Alcance y Limitaciones.........................................................................................................105.1 Alcance..................................................................................................................105.2 Limitaciones..........................................................................................................11

6 Marco Teórico.......................................................................................................................136.1 Prototipo................................................................................................................136.2 Computer-Aided Architectural Design..................................................................136.3 Scalable Vector Graphics......................................................................................146.4 Document Object Model........................................................................................146.5 HTML5..................................................................................................................14

7 Metodología del Proyecto......................................................................................................157.1 Tipo de Investigación............................................................................................157.2 Población y Muestra..............................................................................................157.3 Instrumentos de Recolección de Información.......................................................157.4 Materiales..............................................................................................................157.5 Metodología para el Desarrollo de Software.........................................................167.6 Proceso Metodológico...........................................................................................16

7.6.1 Fases del Proyecto.............................................................................................167.6.2 Procesamiento de Información..........................................................................17


8 Planeación y Administración del Proyecto............................................................................188.1. Cronograma de Actividades..................................................................................188.2. Recursos y fuentes financieras...............................................................................19

9 Referencias............................................................................................................................20

10 Anexos...................................................................................................................................2110.1 Carta de presentación del autor..............................................................................2110.2 Carta de presentación del director del proyecto....................................................2110.3 Nota de aceptación.................................................................................................2110.4 Ficha resumen del proyecto...................................................................................21


RESUMEN

El objetivo principal de esta investigación es desarrollar un diseño arquitectónico asistido por

computador en dos dimensiones que utilice el estándar vectorial para HTML5 Scalable Vector

Graphics desarrollado por el World Wide Web Consortium utilizando la interfaz de

programación Document Object Model en JavaScript para usuarios sin experiencia en este tipo

de aplicaciones. El nivel de investigación es exploratorio de tipo cuantitativo. La muestra del

estudio contiene 15 participantes, 5 de ellos expertos en el manejo de este tipo de aplicaciones y

10 sin experiencia significativa. Los instrumentos que se utilizara será: test de avances en el

software y encuesta al participante, para desarrollar el software se utilizara la metodología

Feature-Driven Development.

Palabras clave: Desarrollar. Diseño arquitectónico asistido por computador. Dos

dimensiones. Usuarios sin experiencia. Feature-Driven Development.


INTRODUCCIÓN

Desde la invención de HTML5 cada día que transcurre es posible visualizar que la gran

demanda de aplicaciones en la nube crece exponencialmente, pues la dependencia a la tecnología

por la necesidad inherente al ser humano de realizar una tarea rápida y eficazmente es insaciable,

haciendo que este paradigma cobre cada vez más fuerza, enriqueciéndose por el hecho de ofrecer

un software como servicio.

No obstante el dibujo vectorial es un campo poco explorado, particularmente en la

arquitectura, donde las aplicaciones actuales son muy básicas pese a tener un gran potencial. Así

que el desarrollo de un nuevo estándar vectorial que funcione de forma nativa en un navegador el

Scalable Vector Graphics calmara necesidades que por el momento se han ignorado, hasta ahora

compañías como Google y Adobe han empezado a construir aplicaciones basadas en este

estándar, pues deja a un lado la dependencia a un equipo para poder diseñar desde cualquier

dispositivo electrónico como una Tablet o un Smart Phone.

Tomando como base lo anterior el presente proyecto pretende desarrollar un prototipo de

Diseño Arquitectonico Asistido por Computador bidimensional empleando HTML5,

involucrando la computación gráfica para desarrollar una herramienta simple y sencilla para

usuarios inexpertos que se adapte a las necesidades más relevantes del diseño arquitectónico.


1 MARCO GENERAL

1.1 Tipo de Proyecto

Proyecto de ingeniería de sistemas

1.2 Línea de Investigación

SOFTWARE, SISTEMAS EMERGENTES y NUEVAS TECNOLOGIAS, conjunto de

programas, subprogramas subrutinas y menús que se elaboran a manera de aplicaciones y/o

paquetes para cumplir con un fin específico.


2 PLANTEAMIENTO DEL PROBLEMA

2.1 Descripción y Antecedentes del Problema

Desde la invención del primer software de diseño arquitectónico asistido por computador,

estas aplicaciones se han caracterizado por el alto costo de su licenciamiento lo que imposibilita

su eventual uso, por ejemplo su precio actual ronda los 5.000 US$, aunque cabe aclarar que han

disminuido significativamente en su precio, pues inicialmente valían 10 veces más, sin embargo

otro obstáculo son los requerimientos de hardware, para que estas aplicaciones funcionen sin

problema, los estándares físicos de las computadoras deben tener una resolución de 1600x1050,

la memoria tiene que ser mayor a 8 Gb y el procesador debe contar con una frecuencia mayor a 3

GHz, lo que hoy día es un equipo que fácilmente se encuentra en el mercado pero si se cuenta

con un equipo de hace un año es obsoleto y aparte de ello se debe contar con una capacitación

que oscila los 20 US$ y en la que se debe invertir mucho tiempo para aprender lo más sencillo,

por eso es inaccesible para personas o pequeñas empresas del sector productivo de Colombia que

necesitan realizar proyectos arquitectónicos espontáneamente, por el presupuesto y tiempo

implicado, por lo que optan por métodos más rudimentarios.

Está claro que se debe disminuir los requerimientos de hardware y contar con

herramientas muy sencillas es una prioridad para que se conviertan en lo que realmente necesitan

los usuarios sin experiencia en este tipo de programas como lo muestra los más de 7 millones de

usuarios con 12 millones de planos en Floorplaner, una herramienta similar a la que se desea

desarrollar, pues posee portabilidad y acceso, pero urge un gran paso, la entrada a la nube de

estas aplicaciones de forma nativa en el navegador para optimizar los recursos que ofrece el

navegador y así ofrecer un software más sencillo y sin grandes restricciones para posteriormente

desarrollar a la medida de las medianas y pequeñas empresas de Colombia.

2.2 Formulación del Problema

¿Qué nivel de apropiación por parte de usuarios sin experiencia tendría desarrollar un

prototipo de diseño arquitectónico asistido por computador bidimensional utilizando menús

flotantes junto a Scalable Vector Graphics en la nube?



3 JUSTIFICACIÓN

La industria de la informática ha revolucionado el campo del diseño arquitectónico, pues

el uso de computadores aumenta la precisión de los planos y facilita las correcciones y ajustes de

un esbozo sin necesidad de retroceder totalmente, algo imposible cuando se dibuja sobre papel,

pues un cambio mínimo significa comenzar desde una hoja en blanco nuevamente, a eso se debe

su éxito, originando el concepto de Diseño Arquitectónico Asistido por Computador, sin

embargo se debe dar un paso importante para este tipo de aplicaciones, que no necesiten tanto

procesamiento y memoria.

Así que el presente proyecto desarrollara un diseño arquitectónico asistido por

computador que cuente con las herramientas básicas para realizar un plano bidimensional, esto

significa que se enfocara en usuarios que necesitan suplir una necesidad simple y momentánea,

sin necesidad de gastar mucho dinero, siendo muy económico y convirtiéndose en una posible

base para aplicaciones orientadas a usuarios profesionales en la nube, lo que a futuro puede

fortalecer el modelo software como servicio en este tipo de aplicaciones.

Por lo anterior, se está en condiciones de afirmar que esta investigación aportará una

estructura y bases matemáticas aplicadas para el desarrollo de futuras herramientas de la

computación gráfica orientadas al dibujo vectorial y poder apoyar a las pequeñas y medianas

empresas del país desarrollando aplicativos similares que se ajusten a sus necesidades.


4 OBJETIVOS

4.1 Objetivo General

Desarrollar un prototipo de Diseño Arquitectónico Asistido por Computador

bidimensional dirigido a los usuarios sin experiencia en estas aplicaciones, haciendo uso

del estándar vectorial para HTML5 Scalable Vector Graphics y menús flotantes.

4.2 Objetivos Específicos

Crear un lienzo de trabajo con Scalable Vector Graphics que reconozca los eventos del

mouse utilizando en JavaScript la API de Document Object Model en AJAX.

Identificar fórmulas matemáticas relacionadas con el contorno de las figuras para poder

crearlas, post-editarlas y mostrarles ayudas visuales.

Realizar un sistema de capas de un solo nivel para facilitar la estructuración de un plano

por parte del usuario.

Estudio de una interfaz gráfica que no fuerce innecesariamente el sentido de la vista,

involucrando una combinación de colores y estructuración de interfaz gráfica sencilla y

útil en menús flotantes.


5 ALCANCE Y LIMITACIONES

5.1 Alcance

El proyecto en desarrollo tiene como alcance desarrollar un prototipo de Computer-

Aided Architectural Design bidimensional en HTML5 implementando Scalable Vector Graphics

con Document Object Model dirigida a usuarios inexpertos en el uso de estas aplicaciones, lo

que comprende que al diseñar se centre en disminuir los requerimientos de hardware, dejando

únicamente las herramientas indispensables para la realización de un plano.

Para estructurarlo se desarrollara un sistema de capas y además contendrá ayudas

gráficas, tales como una grilla, zoom, post-edición de las figuras y un sistema de acotación,

realizando una Graphical User Interface con menú flotantes, que categoricen todas las

herramientas del software en 10 categorías:

Tabla 1. Estructura de los menús flotantes

Categoría Descripción HerramientasFiguras Contiene las figuras que de forma

nativa ofrece Scalable Vector Graphics

Líneas, cuadrados, polígonos, polilíneas, acotaciones, círculos, elipses y curvas

Biblioteca Contienen símbolos propios de la arquitectura

Símbolo de ventana y puerta.

Modificar Modificar las figuras que se encuentren en el lienzo

Seleccionar para post-editarla, eliminar y copiar una figura.

Vista Se ajusta la escala de todo el lienzo

Ajustar la escala del dibujo.

Propiedades Se observan los datos de cada figura, se propone que aparte de mostrarlo, se podrá modificar manualmente.

Cambiar las coordenadas de la figura.

Configuración Muestra los datos del lienzo, como su tamaño y su coordenada inicial

Ancho, alto y coordenadas iniciales.

Capas Gestión de capas. Nombres de las capas, renombrar, visibilidad, agregar, eliminar y subir o bajar.

Grilla Modificación de la grilla. Tamaño de la grilla, su color


y grosor.Color Cuando se seleccione una figura

se podrá cambiar su color de relleno y de contorno además de seleccionar el grosor de las figuras.

Color y transparencia del relleno y el contorno, además del grosor del contorno.

Código Mostrará el código SVG que genera la aplicación.

Código SVG en XML

Además contara con una manejo de ficheros, se podrá guardar y cargar datos con la

extensión .svg, es importante aclarar que se podrá deshacer y rehacer algún cambio directo en el

lienzo.

5.2 Limitaciones

Es importante aclarar que es un primer intento para realizar este tipo de aplicaciones, así

que estará sujeta a varios errores no detectados en el periodo de desarrollo, siendo esta su mayor

limitación se clasifican las demás limitaciones en académicas, técnicas y económicas.

Las limitaciones académicas consisten en que no existe en la Universidad de

Cundinamarca un antecedente de editor gráfico orientada a la nube, pues la computación gráfica

es poco explorado en la investigación a nivel institucional y estudiantil, además no se cuenta con

una bibliografía actualizada y cursos que contengan las técnicas utilizadas, tales como Document

Object Model y Scalable Vector Graphics.

Desde el punto de vista técnico el estándar HTML5 aún se encuentra en desarrollo y por

tanto los navegadores que lo soportan lo hacen de forma parcial, sujeto a fallos, así que como

referencia se tomó el navegador Google Chrome, al tener el mayor soporte con CSS3 y HTML5,

es estable con la programación orientada a eventos desde JavaScript; sucede lo mismo con

Scalable Vector Graphics, así que posiblemente tras culminar el proyecto, se deberán realizar

revisiones posteriores.

Esta aplicación depende del navegador, así que está sujeto a este intermediario, lo que no

permite por el momento explotar muchos recursos del sistema, y en ocasiones se experimentaran

fallos al cargar el programa.

Se cuenta con un corto presupuesto para este tipo de investigación, por tanto se recurrirá

directamente a las páginas web oficiales de desarrolladores de aplicaciones similares o de las

herramientas utilizadas, dejando una brecha idiomática, pues los contenidos actualizados solo


están disponibles en inglés y en ocasiones las traducciones no armonizan con la idea original del

autor, lo que extiendes esta barrera a una cultural.


6 MARCO TEÓRICO

6.1 Computer-Aided Architectural Design (CAAD)

El termino computer-aided architectural design (CAAD) se define como “connects the

two worlds and points to the original idea behind using computers in architecture: to improve the

built, physical environment by providing the best instruments and methods for the creators of

architecture” (SCHMITT, 1999), de ahí está claro que es un conjunto de herramientas gráficas,

pero ¿cuáles son esos instrumentos y métodos que más se necesitan para que realmente se pueda

reconocer como un CAAD?

Autores como De Vries, Van Leeuwen, & Achten(2001) concuerdan con que es un

programa que “for drafting allows the designer to document the geometrical properties of the

design. A drawing supports both synthesis and analysis, however information capture from the

drawing requires human visually based interpretation”, en consecuencia es importante las ayudas

visuales que brindan estos programas para poder dibujar figuras geométricas y sobre todo poder

editar más adelante sus propiedades, pero que el diseñador entienda que está realizando.

Al respecto, el uso de capas se ha convertido en una característica típica en estas

aplicaciones, pues “that can be turned on and off, and changed.” (Grabowski, 2010), lo que da al

usuario la facilidad de disponer de secciones específicas de su plano, sin hacer grandes cambios

en el lienzo de trabajo, aportándole estructura a un plano.

Otra herramienta, es la grilla, que “are used to predefine the parts of a drawing surface

that offer candidate locations for points in a drawing.” (Szalapaj, 2013), ofreciendo precisión

para dibujar figuras.

6.2 Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG) es definido como: “a Web graphics language. SVG

defines markup and APIs for creating static or dynamic images, capable of interactivity and

animation, including various graphical effects. It can be styled with CSS, and combined with

HTML” (DAILEY, 2010), por tanto este estándar vectorial se ha preparado especialmente para

su adaptación con el diseño web.


Al respecto Dailey , Frost, & Strazzullo (2012) afirman:

SVG is suitable for incorporation with HTML5, web-based applications, and rich Internet applications (RIAs). The last 10 years have seen a great elevation of the status of the phrase web-based application. Not so many years ago, people in the web community used to respond with sarcasm or disbelief when someone talked about wanting to create a web-based application that lived primarily in the browser. A cursory inspection of the his- tory of HTML5 reveals that the creation of web applications was one of the primary intentions behind the development of this emerging specification. The incorporation of inline SVG into the HTML5 specification is a great advantage for web developers.

Así que es una oportunidad más que se abre para los desarrolladores web, pues SVG tiene

la capacidad de adaptarse con el navegador de forma vectorial, utilizando HTML5 y de esta

forma realizar aplicaciones orientadas a la nube.

6.3 Document Object Model (DOM)

Document Object Model es una interfaz de programación de aplicaciones que ayuda a

manipular un archivo HTML o XML, como es el caso de SVG, básicamente es:

a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. (W3C, 2005)

AJAX hace uso de este estándar para poder gestionar un XML desde JavaScript y así

poder crear aplicaciones interactivas.

6.4 HTML5

HTML el HyperText Markup Language, es el lenguaje para la elaboración de páginas

web que utiliza etiquetas y dentro de ellas están sus atributos, en su quinta versión es de resaltar

que tiene un potencial impresionante para la realización de sitios más dinámicos.


7 METODOLOGÍA DEL PROYECTO

7.1 Tipo de Investigación

La investigación es cuantitativa y experimental porque demuestra de forma estadística la

relación entre la apropiación que usuarios sin experiencia en la arquitectura tendrían frente a las

utilidades accedidas desde submenús flotantes de un modelo de Diseño Arquitectónico Asistido

por Computador bidimensional sustentado en la Nube.

7.2 Hipótesis

La hipótesis central del estudioes: “Puede desarrollarse un diseño arquitectónico asistido

por computador bidimensional en la nube adaptable a usuarios sin experiencia”.

A su vez, las hipótesis operacionalesquedirigenlainvestigaciónson:

Los menús flotantes divididos en 10 categorías facilitan la accesibilidad a las herramientas

del software.

Un sistema de capas de un nivel es útil y usable para la estructuración de un plano.

El diseño de una buena interfaz gráfica es proporcional a los avances que realice el usuario.

Los eventos del mouse no es siempre la forma más eficiente de manipular un plano, por

tanto es útil editar las propiedades de la figura desde un menú que modifique las

coordenadas exactamente.

7.3 Población y Muestra

La investigación tomara una muestra de 5 personas con conocimientos en arquitectura,

para que evalúen el proyecto, por otro lado se tomara un grupo de 10 personas con poca o nula

experiencia en este tipo de aplicaciones, así se tendrán dos puntos de vista, el de evaluadores

profesionales y el de aficionados.

7.4 Instrumentos de Recolección de Información

Los participantes sin previa instrucción utilizaran el software, posteriormente se les

aplicara una encuesta que tiene como objetivo evaluar la facilidad de la navegación en el

programa, además se verán que tantos avances pudieron realizar en el archivo que generen.

Finalmente se le mostrara un video donde se evidencia las características de este software

y se aplicara una encuesta que en términos conceptuales evalúen el proyecto.


El objetivo es que de forma cuantitativa se califique las características del software, por

parte de profesionales y aficionados, que además puedan de forma autodidacta entender el

software y asimilar los avances que realizaron, por eso se utilizaran dos encuestas y por otro lado

el fichero generado para observar objetivamente sus avances.

7.5 Materiales para el desarrollo

Para realizar esta aplicación se utilizara un computador de 6Gb de memoria RAM,

750Mb de Disco duro, Procesador Core i5, que tenga el navegador Google Chrome actualizado,

pues así contendrá HTML5 para la estructura en XML, CSS3 para el diseño web, JavaScript para

detectar los eventos del ratón y poder utilizar la técnica Document Object Model y SVG que es

un XML que contiene el dibujo vectorial, además se necesitara un editor de texto, por eso se

escogió Notepad++, pues contiene herramientas visuales para facilitar visualmente la

programación el proyecto.

Adicionalmente se utilizara papelería, impresora y servicio de Internet para tener acceso a

información actualizada de los estándares web para diseño en cascada, programación orientada a

eventos y dibujo vectorial.

7.6 Metodología para el Desarrollo de Software

Se utilizara Feature-driven development, así que inicialmente se construirá una vista

general del proyecto para contextualizarse, lo que permitirá realizar una lista de funcionalidades

donde se detecte cada característica.

Por cada característica, se necesitara realizar un plan o modelo de como abarcar o

construir las funcionalidades, detectando las prioridades y dependencias, para poder diseñarla y

construirla iterativamente.

7.7 Proceso Metodológico de la investigación

7.7.1 Fases del Proyecto.

Fase 1: Documentacióno Estudio del estándar Scalable Vector Graphics o Estudio de la técnica Document Object Model.

Fase 2: Estudio de Viabilidado Realizar un prototipo de Diseño Arquitectonico Asistido por Computador.

Fase 3: Planear y diseñar por característicao Planear y diseñar la lista de figuraso Planear y diseñar la gestión de capaso Planear y diseñar las ayudas visuales para los diseñadores

Fase 4: Programación del software


o Crear lienzoo Dibujar figuraso Estructurar por capaso Desarrollo de guías para el diseñador.o Crear una interfaz gráfica flotante.

Fase 5: Realizar pruebaso Aplicación de la pruebao Crear pruebas de reconocimiento y evaluación conceptual de la aplicación.o Selección de la muestra.o Aplicación de la pruebao Tabular pruebas

Fase 6: Análisis de la informacióno Crear diagramaso Análisis generalo Clasificar poblacióno Análisis especifico

Fase 7: Divulgación de resultadoso Realización del documentoo Realización de la presentacióno Exposición de los resultados

7.7.2 Procesamiento de Información

Se clasificaran los datos obtenidos por las características de la población en dos categorías,

por profesional y aficionado.

Se usara un video para realizar la prueba de vista general del proyecto.

Se utilizara una hoja de cálculo para tabular la información.

Habrá una encuesta online, utilizando HTML5, CSS3 y JavaScript.


8 PLANEACIÓN Y ADMINISTRACIÓN DEL PROYECTO

8.1. Cronograma de Actividades

Tabla 2. Cronograma de actividades

Fase ActividadTiempo en Ejecución

Mes 1

Mes 2

Mes 3

Mes 4

Documentación Estudio del estándar Scalable Vector GraphicsEstudio de la técnica Document Object Model.

Estudio de Viabilidad

Realizar un prototipo de Diseño Arquitectonico Asistido por Computador.

Planear y diseñar por característica

Planear y diseñar la lista de figurasPlanear y diseñar la gestión de capasPlanear y diseñar las ayudas visuales para los diseñadores

Programación del software

Crear lienzoDibujar figurasEstructurar por capasDesarrollo de guías para el diseñador.Crear una interfaz gráfica flotante.

Realizar pruebas Aplicación de la pruebaCrear pruebas de reconocimiento y evaluación conceptual de la aplicación.Selección de la muestra.Aplicación de la pruebaTabular pruebas

Análisis de la información

Crear diagramasAnálisis generalClasificar poblaciónAnálisis especifico

Divulgación de resultados

Realización del documentoRealización de la presentaciónExposición de los resultados


El proyecto se está realizando de forma individual, así que el responsable de todo es el

autor.

8.2. Recursos y fuentes financieras

Tabla 3. Recursos y fuentes de financiamiento

Área RecursoCosto

$Materiales Computador 1 300 000

Navegador Google Chrome

0

Papelería 300 000Impresora 350 000Servicio de Internet 350 000

Recurso Humano Programador 1 000 000Diseñador 1 000 000

Bienes Material Bibliográfico

300 000

Material de escritorio 150 000Servicios Movilidad 600 000

Total 5 350 000

Las fuentes de financiamiento son del autor, ya se cuentan con varios materiales, bienes y

el recurso humano.


9 REFERENCIAS

DAILEY, D. (Septiembre de 2010). An SVG Primer for Today's Browsers. Recuperado el 24 de

Agosto de 2014, de World Wide Web Consortium:

http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html

DE VRIES, B., VAN LEEUWEN, J. P., & ACHTEN, H. (2001). Computer Aided Architectural

Design Futures 2001: Proceedings of the Ninth International Conference Held at the

Eindhoven University of Technology, Eindhoven, the Netherlands, on July 8-11, 2001.

Boston: Springer Science & Business Media.

GALLI, M., & MÜHLHOFF, C. (2000). Virtual Terragni: Caad in Historical and Critical

Research. Basel: Springer Science & Business Media.

SCHMITT, G. (1999). Information Architecture: Basics and Future of Caad. Basel, Suiza:

Springer Science & Business Media.

W3C DOM IG. (19 de Enero de 2005). Document Object Model (DOM). Recuperado el 24 de

Agosto de 2014, de World Wide Web Consortium: http://www.w3.org/DOM/

Documents

Anteproyecto CAAD Con APA