%%% libreria_grafica.tex --- 

\section{Librerías Gráficas}
Del lado del cliente, es necesario generar un diagrama apropiado y visible, en especial que su principal característica y objetivo es que sea entendible y de fácil edición.

Pero, previo a seleccionar una de las librerías gráficas disponibles, es preciso realizar un análisis crítico presentando una serie de técnicas de navegación, de selección y manipulación en \cite{buehler04:_infor_visual} que ayudan al usuario a visualizar, comprender el diagrama y a ingresar datos. Las interfaces de las bibliotecas seleccionadas nos deberían aporta alguna ayuda significativa para implementar la mayor cantidad de técnicas posibles y brindar al usuario un ambiente amigable y que favorezca al mayor ahorro de esfuerzo cognitivo.

\subsection{Técnicas de Navegación, Selección y Manipulación}
\subsubsection{Manipulación y Selección}
Las técnicas de selección y manipulación siguientes son de interés no sólo para la visualización de la salida de un programa, sino también para el ingreso de más datos y, además, como un medio para descubrir más información.

\begin{description}
\item[Selección] % Pág. 319
  La selección utilizando el ratón o un dispositivo de entrada similar es una de las operaciones interactivas más comunes en las interfaces gráficas modernas. 
\item[Hover Queries] % Pag. 320
  La forma más común de selección en una computadora es moviendo el cursor sobre un objeto y haciendo clic con el botón del ratón. En el caso de las \emph{Hover Queries}, se prescinde del clic. La información extra acerca de un objeto es revelada cuando el ratón pasa sobre éste. Usualmente se implementa con un retardo. 
\item[Path Tracing] % Pag. 321
  Hay tareas como trazar una curva o manejar un auto envuelve un control continúo. Para ello, se realiza una serie de correcciones continuas basada en un feedback visual acerca de los resultados de nuestra reciente acción.  
  %% \item[Two-handed interaction]  %% (No será utilizado en este caso)
\end{description}

\subsubsection{Exploración, Navegación}
Las siguientes son técnicas de navegación que nos interesaría poder ofrecer al usuario, lo cual es importante que puedan ser implementada con cierto grado de facilidad:

\begin{description}
\item[Técnicas de Distorsión] % Pag. 340 (367 del PDF)
  Un número de técnicas han sido desarrolladas para distorsionar el espacio de una representación de datos, dando más lugar a puntos de interés designados y decrementando el espacio de las regiones alejadas de estos. Lo que es de específico interés es expandido espacialmente bajo el costo de reducir lo que no lo es, de esta forma se provee dos cosas: enfoque y contexto.
  \begin{description}
  \item[Zoom inteligente] % Intelligent zooming: Pag. 340
    Parte del gráfico cambian de tamaño y son reposicionados dinámicamente basado en la selección de ciertos puntos de interés, así los nodos seleccionados son expandidos para mostrar sus contenidos.
  \end{description}
\item[Rapid Zooming] % Pag. 343
  Esta técnica provee de un gran espacio de información, aunque sólo una parte es visible en la ventana en todo momento. El usuario puede hacer zoom rápidamente dentro o fuera de los punto de interés, lo cual implica que aunque el enfoque y el contexto no están simultáneamente disponible, el usuario puede moverse suave %rapidy and smoothly
  y rápidamente entre el enfoque y el contexto de ida y vuelta.
    % \item[Elision Techniches] % Pag.: 344  
\item[Vínculos de Hipertexto (Hypertext Links)] 
% \item[Magnifying Windows]  % En el capítulo 10 no lo presenta, me parece que es lo mismo que "multiples ventanas" pues a estas se les puede aplicar zoom por separado.
\item[Múltiples Ventanas] % Pag.: 344
  Es común tener una ventana que muestre una vista general y varias otras que presenten detalles expandidos. El mayor problema de percepción con esta técnica es que la información detallada en una ventana está desconectado de la vista general (de la información contextual) mostrada en cualquier otra. La solución es usar líneas que conectan los límites del la ventana con zoom a la fuente de la imagen dentro de la vista más grande.
\item[Zooming] 
\end{description}

Existen técnicas de navegación en 3D las cuales serán ignoradas puesto que todos los diagramas con los que vamos a trabajar serán en dos dimensiones. \\


Las técnicas de interacción rápida con datos son las siguientes:

\begin{description}
\item[Dynamic Queries] % Pag.: 346
  Usualmente, el dato es transformado antes de mostrarse. Estos ``mapeos'' de datos interactivos es el proceso de ajustar la función que relaciona las variables de datos a las variables de visualización. Una relación no linear entre el dato y su representación visual puede traer el dato en un rango donde los patrones son más fáciles de ser visibles. 
  Por ejemplo, para grandes y complejos conjuntos de datos, a veces es útil limitar los rangos de valores de datos que son visibles y 
  Por medio del ajuste de unas variables de rango de datos, ciertos subconjuntos de datos pueden ser aislados y mostrados.
\item[Brushing] % Pag.: 348

\end{description}


\subsection{Lenguajes y Tecnologías}
Al ser una arquitectura con base en la generación de páginas Webs, se requiere de la utilización de HTML5, Javascript y CSS como lenguajes. Estos son los estándares más comunes y actuales que se utilizan al momento de escribir este texto. 


Para proporcionar el soporte a gráficos dinámicos, HTML5 y Javascript ofrece un elemento llamado Canvas la cual está definida en \cite{w3c_htmlcanvas}. %% TODO: BUSCAR BIBLIO de SVG! 
También, es posible realizar gráficos usando SVG, un formato XML que es interpretado por la mayoría de exploradores web. 

\subsection{Canvas}
El estándar de Canvas provee de una interfaz con una serie de métodos básicos para graficar líneas, arcos, rectángulos e incluso texto e imágenes, así como métodos para personalizar rellenos y estilos y además para realizar transformaciones para escalar, rotar y mover objetos. Estos métodos básicos pueden usarse para crear cualquier dibujo y diagrama de dos dimensiones y mostrarlos en un sitio web.

%% TODO: Pondría un ejemplo?
%%
%% Un ejemplo básico para dibujar algunas figuras geométricas...

Básicamente, cualquier tipo de técnica de navegación presentada anteriormente aplicable a dos dimensiones puede ser implementada con esta interfaz, sin embargo, es deseable utilizar una librería que provea una interfaz más sencilla que esta como una capa de abstracción por encima de la que HTML5 nos provee. 

%%% Local Variables: 
%%% mode: latex
%%% TeX-master: "../../tesis"
%%% TeX-PDF-mode: t
%%% coding: utf-8-unix 
%%% End: 
