informe final proyecto de plataforma web

INSTITUTO FORESTAL

Informe Final Proyecto de Plataforma WEB

En el marco del proyecto

“PLATAFORMA DE SISTEMATIZACIÓN Y DIFUSIÓN

DE INFORMACIÓN TECNOLÓGICA DE PRODUCTOS

FORESTALES NO MADEREROS PFNM DEL BOSQUE

NATIVO CHILENO”

Especificaciones de Diseño y de Requerimientos

PFNM Bosque Nativo WEB Desarrollado por: Versión 2013 Rodrigo Pincheira V. 25/09/2013 Ingeniero forestal

PFNM BosqueNativo en Chile WEB - 2013 - i -

TABLA DE CONTENIDOS

INTRODUCCIÓN .............................................................................................................................. 1

GLOSARIO, DEFINICIONES, ACRÓNIMOS Y ABREVIACIONES UTILIZADAS .......................................... 2

1. ANÁLISIS Y DISEÑO PRELIMINAR DEL PORTAL DE DIFUSIÓN TECNOLÓGICA DE PFNM Y SELECCIÓN DE TECNOLOGÍAS DE SOFTWARE ......................................................... 3

1.1 PLAN DE DESARROLLO ........................................................................................................... 3 1.2 ESPECIFICACIONES DE REQUERIMIENTOS Y DISEÑO LÓGICO ...................................................... 3 1.3 TECNOLOGÍAS DE SOFTWARE .................................................................................................. 8

2. DISEÑO DE RUTINAS ............................................................................................................ 10

2.1 DISEÑO LÓGICO Y APLICACIONES EN LÍNEA PARA EL DESPLIEGUE DE INFORMACIÓN. ................. 10

3. CONFIGURACIÓN DE PLATAFORMA WEB ........................................................................... 12

4. DESARROLLO DE APLICACIONES DE NAVEGACIÓN ........................................................ 13

4.1 DISEÑO PRELIMINAR DE LOGOTIPO Y PÁGINAS WEB ................................................................ 13

5. DESARROLLO DE FORMULARIOS ELECTRÓNICOS .......................................................... 15

5.1 DESARROLLO DE PÁGINAS WEB Y FORMULARIOS DE INGRESO DE INFORMACIÓN ....................... 15

6. CONFIGURACIÓN Y DESARROLLO DE BASES DE DATOS ............................................... 16

6.1 DESARROLLO DE BASES DE DATOS, MODELO DE INFORMACIÓN. .............................................. 16

7. DISEÑO GRÁFICO DEL PORTAL Y PROGRAMACIÓN DE RUTINAS ................................. 20

7.1 DESARROLLO DE BASES DE DATOS, MODELO DE INFORMACIÓN.¡ERROR! MARCADOR NO

DEFINIDO.

8. PRUEBAS DE FUNCIONAMIENTO DEL PORTAL ................................................................. 25


DEFINIDO.

9. MANTENCIÓN Y ACTUALIZACIÓN ANUAL DE BASE DE DATOS Y RUTINAS .................. 26


DEFINIDO.

10. ANEXOS. ................................................................................................................................... 27

10.1 ANEXO 1: CÓDIGO PÁGINAS ASP DE ESTADÍSTICAS PFNM PARA BOSQUE NATIVO ................... 27

Proyecto de Software Primer informe de avance

PFNM BosqueNativo en Chile WEB - 2013 - 1 -

INTRODUCCIÓN

A continuación se presenta el informe final con las especificaciones de diseño y requerimientos tecnológicos considerados en el desarrollo y actualización de un portal WEB, el cual se enmarca dentro de las actividades encomendadas y financiadas por el Ministerio de Agricultura, a través del Fondo de Investigación del Bosque Nativo, liderado por la Corporación Nacional Forestal, en el proyecto adjudicado al Instituto forestal “Plataforma de sistematización y difusión de información tecnológica de productos forestales no madereros PFNM del bosque nativo chileno” CONAF – INFOR – 004/2011. Esta actividad se condice con el objetivo general del proyecto, el cual busca: “Desarrollar una plataforma de información tecnológica de Productos Forestales no Madereros PFNM provenientes del Bosque Nativo, orientada a difundir y perfeccionar los metodos y técnicas de manejo sustentable de estos recursos, constribuyendo a la implementación eficaz y sostenible de la Ley de Recuperación del Bosque Nativo y Fomento Forestal” El PFNMBNativoChile o portal WEB de Productos Forestales No Madereros Para El bosque Nativo en Chile corresponde a una aplicación WEB compuesta por una página WEB principal u Homepage con vínculos a otras páginas con información estática y dinámica. En el desarrollo del portal se consideraron 9 actividades las cuales se presentan a continuación:

1. Análisis y diseño preliminar del portal de difusión tecnológica de PFNM y selección de tecnologías de software 2. Diseño de rutinas 3. Configuración de plataforma WEB 4. Desarrollo de aplicaciones de navegación 5. Desarrollo de formularios electrónicos 6. Configuración y desarrollo de bases de datos 7. Diseño gráfico de portal y programación de rutinas 8. Pruebas de funcionamiento del portal 9. Mantención y actualización anual de bases de datos y rutinas

En el presente documento se presentan los resultados finales de cada una de estas actividades, complementando la información considerada en el primer informe en el cual se describieron las actividades 1 a 6, incorporando las actividades 7 a 9, así como las modificaciones realizadas en el transcurso del proyecto.



GLOSARIO, DEFINICIONES, ACRÓNIMOS Y ABREVIACIONES UTILIZADAS

En adelante, se utilizarán las siguientes siglas, definiciones y convenciones. Algunas palabras se utilizarán en Inglés por ser de uso universal.

PFNM : Diminutivo de Productos Forestales no Madereros INFOR : Instituto Forestal de Chile Internet : Es una red global que conecta a millones de computadores

y está basada en el protocolo de comunicación TCP/IP. Aplicaciones de cliente

:

Uno o más componentes de software que realizan alguna acción o brindan algún servicio y que se ejecutan dentro del navegador

Aplicaciones de Servidor

:

Uno o más componentes de software que realizan alguna acción o brindan algún servicio y que se ejecutan en el servidor de Internet

WEB : Diminutivo de World Wide Web. Nombre de uno de los servicios de Internet que utiliza el protocolo HTTP para transferir información.

ASP : Diminutivo de Active Server Pages o Páginas de Servidor Activo. Tecnología Microsoft para la creación de aplicaciones basadas en el servidor.

PHP Diminutivo de Hypertext Pre-processor. Tecnología para la creación de aplicaciones basadas en el servidor.

ActionScript : Lenguaje utilizado por Macomedia Flash. Posee una sintaxis similar a JavaScript.



1. ANÁLISIS Y DISEÑO PRELIMINAR DEL PORTAL DE

DIFUSIÓN TECNOLÓGICA DE PFNM Y SELECCIÓN DE

TECNOLOGÍAS DE SOFTWARE

1.1 PLAN DE DESARROLLO

El producto a implementar consistió en diseñar y desarrollar una aplicación WEB con los resultados del proyecto “Plataforma de sistematización y difusión de información tecnológica de productos forestales no madereros PFNM del bosque nativo chileno” para ser levantada en un servidor del INFOR y que a la vez pueda ser visualizada en la mayoria de los navegadores existentes en el mercado. Lo anterior implicó procesar toda la información generada en el transcurso del proyecto, ya sea documentos de textos, fotografías, bases de datos, así como el desarrollo de aplicaciones que faciliten su manejo y visualización en un ambiente WEB. También se consideró desarrollar una aplicación Cliente - Servidor con acceso libre, para el análisis de las exportaciones de PFNM del Bosque Nativo, en la cual se contempló el desarrollo de una interfase gráfica programadas y migradas de ASP a PHP y flash, desde las cuales se realizan consultas (solo lectura) a una base de datos.

1.2 ESPECIFICACIONES DE REQUERIMIENTOS Y DISEÑO LÓGICO

El producto será entendido como un sistema de información WEB de actualización continua, que contiene y administra información tecnológica y comercial de productos forestales no madereros asociados al bosque nativo, permitiendo navegar entre diferentes páginas y enlaces a sitios de interés, desplegando estudios e imágenes como resultados del proyecto de investigación y relacionados con:

Antecedentes generales del proyecto

Información tecnológica de Productos Forestales no Madereros para el Bosque Nativo

Información de procesamiento de PFNM

Galería de imágenes de PFNM

Información de catastro de PFNM

Estadísticas de exportación de PFNM: despliegue de tablas y gráficos, filtros para especias relacionadas con el bosque nativo.

Información de mercado de PFNM



En el producto a desarrollar se consideró su implementación como parte del portal WEB del “Sistema de Gestión Forestal” y del portal de “PFNM” en Chile. Lo anterior implicó una revisión del diseño lógico, mapa de navegación y estructura de directorios y archivos de estos portales, cuyos esquemas se presentan en las imágenes a continuación. La mayoría de estas páginas, su diseño lógico y gráfico, fueron modificadas y complementadas con los nuevos requerimientos del proyecto de PFNM para el Bosque Nativo. Figura 1: Vista del antiguo portal web de “Sistema de Gestión Forestal” y “Productos Forestales no Madereros en Chile”, así como rutina de “Estadisticas de exportación de PFNM”

www.gestionforestal.cl

www.gestionforestal.cl:81/pfnm/estadisticas/estadisticas.htm

www.gestionforestal.cl:81/pfnm/index.htm



Figura 2: Mapa de navegación Sistema de Gestión Forestal

Página Antecedentes de Gestión

Página Antecedentes Tecnológicos

Página principal

Inicio

Antecedentes

tecnológicos

Paquetes tecnológicos

agroforestales

Técnicas de Manejo

de Bosque Nativo

Rentabilidad de

Plantaciones

Rentabilidad en

Bosque nativo

Páginas con:

- Textos

- Mapas

- Fotografías

Paquetes

tecnológicos - Plantaciones

- Bosque Nativo

- Agroforestería

Tipologías y

Recursos

Antecedentes de

Gestión

Destacados

Proyectos Destacados y relacionados

- Innovación silvicola e industrial del boldo

- Productos Forestales No Madereros en

Chile

Estadisticas de

Exportación

de PFNM en

Chile

Vínculos

destacados

Simulador de

Rentabilidad

Forestal

Otros sitios

de interés



Estructura final de directorios del portal de PFNM para bosque nativo en chile

El sitio WEB de PFNM reside en el computador designado como servidor web. A partir del directorio definido como raíz de la aplicación (“~raiz/”), se definen los siguientes directorios:

Directorio Descripción

~raiz/ Archivos principales a los cuales tiene acceso el cliente. Aquí reside el archivo Index.html

~raiz/images/ Contiene todas las imágenes que utiliza el sistema.

~raiz/Catastro/ Directorio con información relacionada con el el catastro de PFNM en Chile. Contiene las aplicaciones flash de menú y las páginas de marcos principales, así como subdirectorios con las páginas WEB de información

~raiz/sim_pfnm Directorio con el sistema de información de Mercado. Contiene las páginas de menú y las páginas de marcos principales, así como subdirectorios con las páginas WEB de información en formato de texto.

~raiz/Multimedios Directorio con aplicaciones Flash para el despliegue de fotografías e imágenes generadas en el transcurso del proyecto.

~raiz/Paqtecnologicos Directorio con información tecnológica de PFNM en Chile. Contiene las páginas de menú y las páginas de marcos principales, así como subdirectorios con las páginas WEB de información

~raiz/pactecmaqui Directorio con información tecnológica de Maqui. Contiene las páginas de menú y las páginas de marcos principales, así como subdirectorios con las páginas WEB de información

~raiz/Procesos Directorio con información relacionada con la transformación de PFNM en Chile. Contiene las páginas de menú y las páginas de marcos principales, así como subdirectorios con las páginas WEB de información

~raiz/estadisticas/ Directorio solo en servidor que contiene la aplicación para las estadísticas de exportación de PFNM. Contiene las páginas ASP y la base de datos

~raiz/otros Directorio con otro tipo de información como por ejemplo los antecedentes del proyecto



Estructura final de directorios de la aplicación de Estadisticas de Exportación de PFNMChile

La aplicación de estadisticas de exportación de PFNM reside en el computador designado como servidor web. A partir del directorio definido como raíz de la aplicación (“~raiz/estadisticas”), se definen los siguientes archivos, los cuales fueron migrados de código ASP a PHP, para una mejor visualización en diferentes tipos de navegadores y dispositivos.

Archivo Peso Descripción

estadisticas.htm

1 kb Página WEB principal que contiene 3 marcos. Uno superior que despliega la página tituloestad.htm, uno lateral que presenta la página formulario.php y un marco para el despliegue de los resultados de las consultas.

formulario.php 7 kb Página php que muestra el formulario de consulta. Esta contiene rutinas que leen los parámetros de la base de datos y los muestra en las listas desplegables del formulario.

graficar.php 12 kb Página php que muestra los resultados de la consulta referentes a las estadísticas anuales de exportación (1ra salida), gráficos y ranking de países de destino de las exportaciones. En esta página se despliegan botones para acceder a la página resultado .php

resultado.php 8 kb Página php que muestra el detalle anual de la consulta realizada

Grafico1.swf Grafico2.swf Grafico3.swf

9 kb Aplicaciones flash mostradas en graficar.asp y que despliegan gráficos que varian de acuerdo a los resultados de la consulta.

Ranking1.php Página php que muestra el detalle anual de la consulta realizada de ranking de paises por volumen exportado.

Ranking2.php Página php que muestra el detalle anual de la consulta realizada de ranking de paises por monto exportado.

Ranking3.php Página php que muestra el detalle anual de la consulta realizada de ranking de paises por relación FOB/VOL.

obtenerEspecies.php obtenerPaises.php obtenerproductos.php

Páginas con código php de consultas a la base de datos



1.3 TECNOLOGÍAS DE SOFTWARE

El PFNMBNativoChile o portal WEB de Productos Forestales No Madereros Para El bosque Nativo en Chile corresponde a una aplicación WEB compuesta por una página WEB principal u Homepage con vínculos a otras páginas con información estática y dinámica. En algunos ambientes se considera el desarrollo de aplicaciones de cliente desarrolladas en Flash, principalmente para la visualización de fotografías y algunas aplicaciones de servidor, desarrolladas en PHP y bases de datos con las estadísticas de exportación de PFNM. También posee algunos ambientes con marcos (frames) como estructura para ubicar la información en pantalla. Fue concebido como un sistema de diseño simple, para ser instalado en un servidor del Instituto Forestal y sin necesidad de instalar componentes que dificulten su visualización en algunos navegadores de internet, siendo relevante la cantidad de información que este sistema posee. Plataforma del Servidor

Para el desarrollo del portal se trabaja con tecnología PHP, considerando los servidores apache de INFOR. También se usará en principio un motor de base de datos Mysql

Lenguaje

Algunas aplicaciones serán desarrolladas en Flash utilizando ActionScript En el módulo de “Estadisticas de PFNM”, para facilitar el acceso a la información se utilizó la tecnología PHP PHP es el lenguaje utilizado para generar páginas dinámicas en el servidor web y para la conexión a la base de datos. Además se utiliza Javascript en algunas páginas de cliente, para generar elementos de interfaz y para validación de la información entregada a través de formularios, antes de ser enviados al servidor.

Base de datos

En el módulo de “Estadisticas de PFNM” se utiliza una base de datos MySql Concurrencia

Los problemas de concurrencia que pudiesen presentarse no son abordados en este proyecto, por estimarse que tienen muy baja probabilidad y severidad.



Plataforma Usuarios La plataforma del usuario debe soportar los navegadores MS Internet Explorer 8.0 o superiores y Google Chrome. Para lo anterior se supone que los usuarios utilizan como mínimo equipos Pentium de 200MHz con 16M o 32M de memoria RAM y tienen habilitadas las opciones de Javascript, así como el Plug-in de flash en sus browsers.

Seguridad

En la versión final se descarto el acceso restringido mediante incripciones de los usuarios, considerándose el acceso libre a la información.

Tolerancia a Fallos

La base de datos maneja los factores de corrupción, integridad y coherencia de la información.



2. DISEÑO DE RUTINAS

2.1 DISEÑO LÓGICO Y APLICACIONES EN LÍNEA PARA EL DESPLIEGUE DE

INFORMACIÓN.

Página PRINCIPAL PFNM para Bosque Nativo

Archivo index.html

Página de inicio del sistema, de acceso global para uso de los clientes que visiten el sitio Web.

No contiene marcos

Contiene dos ambientes para el despliegue de los vínculos: Menú principal y Menú dinámico.

En cada uno de estos ambientes se ubican los vínculos para el despliegue de la información en los otros tipos de páginas.

En el Menú dinámico se presenta una aplicación JavaScrip con imágenes que se desplazan en sentido horizontal y desde la cual se accede a información tecnológica de PFNM.

Contiene un Link a una hoja de estilo pfnm.css en el directorio raíz en la cual se definen los tipos y tamaños de letras, colores de fondo y características de diseño de los vínculos

Contiene una función en JavaScript para la inserción de la fecha

Figura 3: Esquema de página principal de WEB PFNM para Bosque Nativo

Información pie de página

- Información general del proyecto y de contacto

Zona de presentación, logotipos PFNMBosqueNativo, INFOR,

CONAF

Menú principal PFNM - Antecedentes del proyecto

- Información tecnológica de

PFNM

- Procesamiento de PFNM

- Galería fotográfica

- Catastro PFNM

- Estadísticas de exportación de

PFNM

- Información de mercado

Menú gráfico con información

tecnológica de diferentes especies - Avellano

- Boldo

- Murta

- Morchela

- Quillay

- Maqui

- Follajes nativos



Página para el despliegue de información

Directorios con información relacionada: o ~raiz/catastro/ o ~raiz/sim_pfnm/ o ~raiz/paqtecnologicos/ o ~raiz/procesos/ o ~raiz/estadisticas/ o ~raiz/multimedios/ o ~raiz/pactecmaqui/ o ~raiz/otros/

En este ambiente se despliega toda la información relacionada con Catastro de PFNM, Información de Mercado, Información Tecnológica de PFNM, Procesos de transformación de PFNM, Estadísticas de exportación, imágenes, antecedentes del proyecto

Página que contiene 2 Frames: o Frame1 encabezado: carga la página: titulo_cmenutex.html o Frame2 principal: carga diferentes páginas de acuerdo a la

información de gestión solicitada. Estas páginas contienen a la vez dos frames con menus y marco de presentación de la información

Figura 4: Esquema de página para el despliegue de información

SubMenú

textos

Indice

Opción 1

Opción 2

Opción 3

........

Barra de iconos o etiquetas de navegación logotipos PFNM, INFOR, CONAF

Marco de presentación de la información

- Diagramas e índices de la información

- Documentos de texto vinculados al menú lateral



3. CONFIGURACIÓN DE PLATAFORMA WEB

Se realizaron pruebas de configuración en el servidor del Infor para analisar los siguientes atributos: Requerimientos de Rendimiento Los requerimientos de rendimiento que se indican a continuación fueron validados al final del desarrollo.

1. El tiempo de respuesta promedio mínimo admisible fue de 5 segundos con desviación estándar de 3 segundos. Fue medido desde un computador de la Red del INFOR.

2. La base de datos aceptó 20 usuarios concurrentes. 3. El servidor soportó 25 usuarios concurrentes al sistema.

Restricciones de Diseño

Se utilizó un modelo de datos entregado por el Cliente, que es una actualización del modelo de datos de la versión anterior del sistema. Este modelo estubo sujeto a cambio en la etapa del diseño.

La apariencia de las páginas se ciño a los estándares definidos por el Cliente.

Atributos de Sistema

Reusabilidad

Seguridad: El sistema acepta como seguridad la que provee el servidor WEB. Además la permanencia de la conexión es dada por un intervalo de tiempo (timeout) empíricamente definido en los parámetros del sistema. La seguridad de los datos es la entregada por el servidor de base de datos.

Portabilidad: Es el atributo más importante del sistema y se define como sigue:

1. Porcentaje de componentes con código dependiente de la máquina: 0%

2. Porcentaje de código dependiente de la máquina: 0% 3. Utilización de un lenguaje portable: 100%



4. DESARROLLO DE APLICACIONES DE NAVEGACIÓN

4.1 DISEÑO PRELIMINAR DE LOGOTIPO Y PÁGINAS WEB

En esta actividad, se contó con la asesoría profesional de un Diseñador Gráfico con el cual, junto al equipo de trabajo del proyecto, se discutieron y definieron las ideas de diseño a desarrollar. Se comenzó definiendo el logototipo del proyecto, ya que a partir de éste, se continúa con el diseño gráfico de las páginas Web. También se intercambiaron fotografias de productos del bosque Nativo, para una mayor aplicación del concepto a desarrollar. A continuación se presenta una serie de conceptos de logotipos analizados y posteriormente se muestran los seleccionados.

Logotipos considerados para el proyecto:



Una vez definido el logotipo del proyecto, se continuó con el diseño gráfico de las páginas WEB del portal. El diseño definitivo se presenta en la etapa 7 del desarrollo de la aplicación. Propuestas de diseño gráfico de página WEB de PFNM Bosque Nativo



5. DESARROLLO DE FORMULARIOS ELECTRÓNICOS

5.1 DESARROLLO DE PÁGINAS WEB Y FORMULARIOS DE INGRESO DE INFORMACIÓN

En el proyecto, solo se consideró el desarrollo de formularios electrónicos para el intercambio de información con el ususario, en la aplicación de Estadisticas de Información de PFNM para bosque Nativo.

La lógica de estos formularios y las variables solicitadas, se pueden apreciar en el esquema del Modelo de Información, el cual se presenta en el punto 6 del presente informe.



6. CONFIGURACIÓN Y DESARROLLO DE BASES DE DATOS

6.1 DESARROLLO DE BASES DE DATOS, MODELO DE INFORMACIÓN.

Para el desarrollo de la aplicación de estadísticas de exportación de PFNM para Bosque Nativo, se trabajó con la estructura de datos existente, aplicándole modificaciones para realizar el filtrado de estadísticas para productos provenientes del bosque nativo. También se migró del código ASP a PHP, para una mejor visualización en los diferentes navegadores y dispositivos móviles. También se trabajó con el motor de búsqueda MySql, cuya configuración y modelo de datos se presentan a continuación: Arquitectura La arquitectura es de 2 capas, divididas en presentación, lógica y datos:

Cliente Los usuarios se conectan a través de Internet al servidor Web. Servidor Web

Responde a los requerimientos del cliente enviando las páginas en HTML al usuario. También realiza las acciones ordenadas por el usuario sobre la base de datos y envía la información.

CLIENTE

- Página HTML

- Aplicaciones Flash

Presentación

- Inicio sesión

- Formularios

- Gráfico

- Resultados

Lógica

- Pedir información

- Funciones Javascript

- Análisis informac.

SERVIDOR WEB

- Páginas PHP

- - Consultas Base de

datos

- Base de datos Mysql

Internet



La aplicación estadística de Exportación de PFNM para Bosque Nativo trabaja con una base de datos llamada datosnomadereros instalada en el servidor de INFOR, la cual posee la siguiente estructura: Tabla Titulo NOMADERERO: Almacena información sobre las características de

exportación de PFNM desde el año 1990 al 2012.

Posee los siguientes campos:

Nombre del

campo

Tipo de

datos

Propiedades Descripción

id Texto Tamaño:255 Índice

ano Texto Tamaño:255 Contiene el año de la información

producto Texto Tamaño:255 Describe el tipo de producto

especie Texto Tamaño:255 Describe el tipo de especie

país Texto Tamaño:255 Indica el país al cual fue exportado el

producto

exportador Texto Tamaño:255 Indica el nombre de la empresa

exportadora

volumen Número Tamaño:Doble Indica el volumen de exportación de la

especie ( en toneladas)

fob Número Tamaño:Doble Indica el monto en dólares (US$) del

producto exportado

nativo Si/no Campo que discrimina si el producto

proviene del bosque nativo

En color amarillo se destaca el nuevo campo creado en la base de datos para filtrar la información relacionada exclusivamente con el Bosque Nativo. La estructura de directorios y archivos se presentó en el punto 1. El código de programación para las rutinas PHP, con las modificaciones requeridas para las nuevas solicitudes del portal PFNM para bosque Nativo, se presenta en el Anexo 1. A continuación se presenta el modelo de datos para la aplicación:



Modelo de información para aplicación “Estadísticas de exportación de PFNM para Bosque Nativo

Base de datos

- Tabla nomaderero

Formulario.asp

- Consulta productos

- Despliega productos

- Consulta Especies

- Despliega especies

- Consulta país destino

- Despliega país destino

Consultar >>

Graficar.php

- Consulta valores vol y

fob, de acuedo a productos,

especie, país, bosque

nativo

- Despliega todos los datos

en tablas y gráficos

Ranking1.php

Ranking2.php

Ranking3.php

Grafico1.swf

Grafico2.swf

Grafico3.swf

Resultado.php

- despliega la

información por

año



Al cierre del presente informe, con las modificaciones de código desarrolladas, se pueden realizar consultas de información hasta el año 2012. De esta forma, el sistema permite realizar consultas para bosque nativo, filtrando por especie seleccionada, tal como se muestra en la figura siguiente:

Se actualizó la base de datos con información hasta el año 2012 y se agregó un filtro de bosque nativo para la información desde el año 1990 en adelante. De esta manera, se pueden realizar consultas diferenciando los productos y especies provenientes solo del bosque nativo. Concluidas las decisiones de diseño gráfico, se levantó la aplicación para visualización interna en el servidor de INFOR en el transcurso del mes de octubre de 2012. Luego de diferentes pruebas y revisiones, le levantó públicamente en el mes de septiembre de 2013.



7. DISEÑO GRÁFICO DEL PORTAL Y PROGRAMACIÓN DE

RUTINAS

7.1 DISEÑO GRÁFICO DE PORTAL

Continuando con los diseños gráficos preliminares, descritos en los puntos anteriores, se realizaron algunas modificaciones conceptuales y se definieron los diseños definitivos. Con éstos, se inició la programación de las rutinas y el levantamiento de nueva información generada en el transcurso del proyecto. También se adecuaron los menús a la incorporación de la nueva información, así como de la ya existente, en la cual se diferenció la relacionada con especias provenientes del bosque nativo. Figura 1: Imagen final de Home de portal web de “Productos Forestales no Madereros Para Bosque Nativo”



7.2 PROGRAMACIÓN DE RUTINAS

El portal WEB se presenta como un sistema de información de actualización continua, que contiene y administra información tecnológica y comercial de productos forestales no madereros asociados al bosque nativo, permitiendo navegar entre diferentes páginas y enlaces a sitios de interés, desplegando estudios e imágenes como resultados del proyecto de investigación y relacionados con:

Antecedentes generales del proyecto

Información tecnológica y comercial de Productos Forestales no Madereros para el Bosque Nativo

Información de Procesamiento de PFNM

Recopilación de Imágenes de PFNM

Catastro y sistematización de PFNM del Bosque Nativo

Estadísticas de exportación de PFNM: despliegue de tablas y gráficos, filtros para especias relacionadas con el bosque nativo.

Información de Mercado y comercialización de PFNM A continuación se presenta una secuencia de imágenes que describe de mejor manera el desarrollo gráfico de cada tema considerado en el menú principal de la figura 1: Figura 2: Imagen de página con antecedentes generales del proyecto



Figura 3: Imagen de página con información tecnológica y comercial de Productos Forestales no Madereros para el Bosque Nativo

Figura 4: Imagen de página con Información de Procesamiento de PFNM



Figura 5: Imagen de página con recopilación de Imágenes de PFNM

Figura 6: Imagen de página con Catastro y sistematización de PFNM del Bosque Nativo



Figura 7: Imagen de página con estadísticas de exportación de PFNM: despliegue de tablas y gráficos, filtros para especias relacionadas con el bosque nativo.

Figura 8: Imagen de página con información de Mercado y comercialización de PFNM



8. PRUEBAS DE FUNCIONAMIENTO DEL PORTAL

8.1 MODIFICACIONES SISTEMA DE INFORMACIÓN DE ESTADISTICAS DE EXPORTACIÓN.

Con el fin de mejorar la visualización de la información en forma de tablas y gráficos, y que estas pudieran ser vistas en diferentes navegadores como Explorer, Google Chrome, Safari, así como en la telefonía móvil, se modificó la aplicación inicial diseñada en ASP. Para esto se optó por tecnología para aplicaciones de servidor PHP. Figura 8: Imagenes de páginas con información de Estadísticas de Exportación de Productos Forestales no Madereros para el Bosque Nativo



9. MANTENCIÓN Y ACTUALIZACIÓN ANUAL DE BASE DE DATOS Y

RUTINAS

En el transcurso del proyecto y a medida que se disponía de la información, se fue actualizando la información del portal. Las estadísticas de exportación de PFNM están disponibles para el año 2012, considerándose su actualización de forma anual.

10. ANEXOS.

10.1 ANEXO 1: CÓDIGO PÁGINAS PHP DE ESTADÍSTICAS PFNM PARA BOSQUE

NATIVO

10.1.1 PÁGINA: FORMULARIO.PHP

<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="jquery-v1.9.1.js"></script>

<style type="text/css">



</style>

<span id='tipoEspecies' style='display: none'></span>

<TITLE>Formulario Estadisticas Exportacin PFNM Chile</TITLE>

<link rel="stylesheet" href="stylos.css">

<base target="principal">

</HEAD>

<BODY bgcolor="#515202" topmargin="0" leftmargin="0">

<FORM

Name="formulario"

Method="POST"

Action = "graficar.php">

<input type="hidden" value="" name="tipoEspecie" id="inputTipoEspecie">

<table border="0" width="162" cellspacing="0" cellpadding="0" height="273">

<tr bgcolor="#979B00">

<td width="8" height="21"> </td>

<td width="154" height="21">

<font color="#FFFFFF"><b><Font face="Verdana" size="1">

Nativo/Todos</font></b><font size="1"> </font></font>

</td>


</tr>




<select id="NativoTodos" class="select1" name="NativoTodos" size="1"

tabindex="2" style="width: 146; height:23">

<option value="NATIVO" selected>NATIVO</option>

<option value="TODOS">TODOS</option>

</select>

</td>


</tr>






<font color="#FFFFFF"><b><Font face="Verdana" size="1">

Producto</font></b><font size="1"> </font></font>

</td>


</tr>




<font color="#FFFFFF">

<select id="ListaProductos" class="select1" name="ListaProductos"

size="1" tabindex="2" style="width: 146; height:23">

<?php

include("obtenerProductos.php");

?>

<script type="text/javascript">

$(document).ready(function(){

$('#tipoEspecies').text($('#NativoTodos :selected').val());

cargarProductos();

$('#NativoTodos').change(function(){

if($('#NativoTodos :selected').val() == 'TODOS'){

$('#inputTipoEspecie').val('TODOS');

$('#tipoEspecies').text('TODOS');

cargarProductos();

}

else{

inputTipoEspecie

$('#inputTipoEspecie').val('NATIVO');

$('#tipoEspecies').text('NATIVO');

cargarProductos();

}

});

});

function cargarProductos(){

$("#ListaProductos").val(function(){

var producto = $(this).val() + "," + $('#tipoEspecies').text();



$.ajax({

async : false,

type : "POST",

url : "obtenerEspecies.php" ,

traditional : true,

data : {producto:producto},

success : function(data){

$("#ListaEspecie").html(data);

}

});

})

}

</script>

</select>

</font>

</td>


</tr>



<td width="154" height="21"><b><Font face="Verdana" size=1 color="#FFFFFF">

Especie </font></b></td>


</tr>





<select id="ListaEspecie" class="select1" name="ListaEspecie" size="1"

tabindex="3" style="width: 147; height: 23">';



$("#ListaEspecie").val(function(){

var arrayfiltros = [$("#ListaProductos").val() + "," +

$("#ListaEspecie").val()];

$.ajax({

type : "POST",

url : "obtenerPaises.php" ,

traditional : true,

data : {arrayfiltros:arrayfiltros},


$("#ListaPais").html(data);

}

});

})

})

</script>



</select>

</font>

</td>


</tr>




<font color="#FFFFFF"><b><Font face="Verdana" size="1"> País de

destino</font></b>

<font size="1"> </font></font></td>


</tr>



<td width="154" height="25"><font color="#FFFFFF">

<select id="ListaPais" class="select1" name="ListaPais" size="1" tabindex="4"

style="width: 148; height: 23">

</select>

</font>

</td>


</tr>





</tr>





</tr>





</tr>




<p align="right">


<INPUT name="boton1" type="Submit" value="Consultar" tabindex="5" style="font-

family: Verdana; font-size: 8 pt; background-color: #E6C3A6"></font></p>

</td>


</tr>




</td>




</tr>

</table>

</FORM>

<p align="center" class="Estilo1"><a href="intrucciones.htm"><font face="Verdana"

size="1">Ver

instrucciones >></font></a></p>

</BODY>

<footer>



$("#ListaProductos").change(function(){

var producto = $(this).val() + "," + $('#tipoEspecies').text();

$.ajax({

async : false,

type : "POST",

url : "obtenerEspecies.php" ,

traditional : true,

data : {producto:producto},


$("#ListaEspecie").html(data);

}

});



$.ajax({

type : "POST",


traditional : true,




}

});

})

})

</script>



$("#ListaEspecie").change(function(){



$.ajax({

type : "POST",


traditional : true,






}

});

})

})

</script>

</footer>

</HTML>

10.1.2 PÁGINA: GRAFICAR.PHP

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<meta name="GENERATOR" content="Microsoft FrontPage 3.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>Productos Forestales No Madereros en Chile - INFOR 2004</title>


</head>

<?php

$producto = $_POST['ListaProductos'];

$especie = $_POST['ListaEspecie'];

$pais = $_POST['ListaPais'];

$tipoEspecie = $_POST['tipoEspecie'];

$mostrarGraficos = "";

$mostrarRanking = "";

?>

<body bgcolor="#979B00">

<p><font face="Verdana" size="2"><a href="../index.htm" target="_top"><img

border="0" src="../images/pie-estadisticas_bn.jpg" width="630"

height="92"></a></font> </p>

<p align="center"><font face="Verdana" size="3"><b>Exportaciones

anuales </b></font> </p>

<table border="0" width="73%" cellspacing="0" cellpadding="0">

<tr>

<td width="38%"><font face="Verdana" size="2"><b>Producto:</b></font> </td>

<td width="62%"><?php echo $producto ?>

</td>

</tr>

<tr>

<td width="48%"></td>

<td width="52%"><font face="Verdana" size="1"></font></td>

</tr>

<tr>

<td width="38%"><font face="Verdana" size="2"><b>Especie:</b></font> </td>

<td width="62%"><?php echo $especie ?>

</td>



</tr>

<tr>


<td width="52%"><font face="Verdana" size="1"> </font></td>

</tr>

<tr>

<td width="38%"><font face="Verdana" size="2"><b>Pais de destino:</b></font>

</td>

<td width="62%"><?php echo $pais ?>

</td>

</tr>

</table>

<p> </p>

<div align="center">

<center>

<table border="1" width="450" bordercolor="#000000" cellspacing="0"

cellpadding="0" height="51">

<tr>

<td width="106" align="center" bgcolor="#FFFFFF" height="32"><b><font

face="Verdana"

size="2">Año</font></b></td>


face="Verdana"

size="2">Volumen (Toneladas)</font></b></td>


face="Verdana"

size="2">FOB (US$)</font></b></td>

<td width="187" align="center" bgcolor="#FFFFFF" height="32"></td>

</tr>

<?php

include("conexion.php");

$query = "SELECT ano,ROUND(SUM(volumen),2) as sumavol,ROUND(SUM(fob),2)

as sumafob FROM nomaderero";

if($producto != 'TODOS')

$query = $query." WHERE producto = '$producto' ";

if($especie != 'TODOS'){


$query = $query." AND especie = '$especie' ";

else

$query = $query." WHERE especie = '$especie' ";

}

if($pais != 'TODOS'){

if($producto == 'TODOS' && $especie == 'TODOS')

$query = $query." WHERE pais = '$pais' ";

else if ($producto != 'TODOS' || $especie != 'TODOS')

$query = $query." AND pais = '$pais' ";



}

if($tipoEspecie != 'TODOS'){

if($pais != 'TODOS' || $producto != 'TODOS' || $especie != 'TODOS')

$query = $query." AND nativo=true ";

else

$query = $query." WHERE nativo=true ";

}

$query = $query." group by ano";

$result = mysql_query ( $query,$link );

$num_res = mysql_num_rows ( $result );

if($num_res == 0)

echo "No se encontraron resultados";

/* Aquí generaremos todos los años */

function imprimirAno($anoImprimir,$pos){

?>

<tr>

<td width="106" align="center" height="15"><font face="Verdana"

size="2"> <?php echo $anoImprimir;?></font></td>

<td width="135" height="15"><font face="Verdana" size="2">

<?php echo "0.00";?> </font></td>

<td width="135" height="15"><font face="Verdana" size="2"> $

<?php echo "0.00";?> </font></td>


<span id = "Fob<?php echo $pos; ?>" style='display: none'> 0.00

</span>

<span id = "Vol<?php echo $pos; ?>" style='display: none'> 0.00

</span>

</td>

</tr>

<?php

} /*cierre de la funcion imprimirAno */

$arrayAnos = array('1990', '1991', '1992',

'1993','1994','1995','1996','1997','1998','1999',

'2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','201

1','2012','2013');

$j = 0;

while($var=mysql_fetch_array($result)) {

$ano = $var['ano'];



$sumavol = $var['sumavol'];

$sumafob = $var['sumafob'];

/*echo "valores a comparar: ".$j.", $ano".", ".$arrayAnos[j];*/

while($j < count($arrayAnos) && $ano != $arrayAnos[$j]){

imprimirAno($arrayAnos[$j],$j);

$j++;

}

?>

<tr>

<td width="106" align="center" height="15"><font face="Verdana"

size="2"><?php echo $ano;?></font></td>

<td width="135" height="15"><font face="Verdana" size="2"><?php

echo number_format($sumavol, 2, ",", ".");?> </font></td>

<td width="135" height="15"><font face="Verdana" size="2">$<?php

echo number_format($sumafob, 2, ",", ".");?> </font></td>


<form method="POST" action="resultado.php">

<p> <input type="hidden" value="<?php echo $ano;?>"

name="btnAno">

<input type="hidden" value="<?php echo $producto;?>"

name="btnProducto">

<input type="hidden" value="<?php echo $especie;?>"

name="btnEspecie">

<input type="hidden" value="<?php echo $pais;?>"

name="btnPais">

<input type="hidden" value="<?php echo $sumavol;?>"

name="btnSumavol">

<input type="hidden" value="<?php echo $sumafob;?>"

name="btnSumafob">

<span id = "Fob<?php echo $j; ?>" style='display: none'>

<?php echo $sumafob; ?> </span>

<span id = "Vol<?php echo $j; ?>" style='display: none'>

<?php echo $sumavol; ?> </span>

<input class="boton" type="submit" value="Ver detalles.."

name="B1" style="background-color: #E6C3A6;

width: 104; height:25"> </p>

</form>

</td>

</tr>

<?php

$j++;

}

if($j != (count($arrayAnos) - 1) ){

while($j < count($arrayAnos)){



imprimirAno($arrayAnos[$j],$j);

$j++;

}

}

mysql_close($link);

?>

</table>

</center>

</div>

<p align="left"> </p>

<div align="center" style="display:<?php echo $mostrarGraficos; ?>"> <div

align="center"><center>

<div style="padding-bottom:10px">

<object id="grafico1" name="grafico1" type="application/x-shockwave-flash"

data="grafico1.swf" width="600" height="400">

<param name="movie" value="grafico1.swf">

<embed src="grafico1.swf" width="600" height="400">

</object>

</div>






</object>

</div>






</object>

</div>

</center></div>

</div>

<p> </p>

<div align="center" style="display:<?php echo $mostrarRanking; ?>">

<table border="0" width="100%">

<tr>

<td width="33%">

<form method="POST" action="ranking1.php">

<p>


name="btnProductoVol">




name="btnEspecieVol">

<input class="boton" type="submit" value="Ver Ranking por Volumen"

name="B1"

style="background-color: #E6C3A6; width: 177; height: 25">

</p>

</form>

</td>

<td width="33%">


<p>


name="btnProductoFob">


name="btnEspecieFob">

<input class="boton" type="submit" value="Ver Ranking por FOB"

name="B2"

style="background-color: #E6C3A6; width: 177; height: 25"> </p>

</form>

</td>

<td width="34%">


<p>


name="btnProductoFobVol">


name="btnEspecieFobVol">

<input class="boton" type="submit" value="Ver Ranking por FOB/Vol"

name="B3"

style="background-color: #E6C3A6; width: 177; height: 25"> </p>

</form>

</td>

</tr>

</table>

</div>

<div align="left"></div>

<font face="Verdana" size="2"><a href="../index.htm" target="_top"><img


height="92"></a></font>

<div align="left"></div>

<p align="left"> </p>

</body>

<footer>

<script defer="text/javascript">

function graficar(){

var ano = 1990;

for(var i=0;i<23;i++){

var vol = parseInt(document.getElementById('Vol'+i).innerHTML);

var fob = parseInt(document.getElementById('Fob'+i).innerHTML);



var rel = parseInt(fob/vol);

var grafico1 = document.getElementById("grafico1");



grafico1.SetVariable("ano" + (i+1),ano);

grafico1.SetVariable("vol" + (i+1),vol);


grafico2.SetVariable("fob" + (i+1),fob);


grafico3.SetVariable("rel" + (i+1),rel);

ano++;

}

grafico1.SetVariable("tanos","23");



}

graficar();

</script>

</footer>

</html>

10.1.3 PÁGINA: RESULTADOS.PHP

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<meta name="GENERATOR" content="Microsoft FrontPage 5.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>Productos Forestales No Madereros en Chile - INFOR 2004</title>


</head>

<body bgcolor="#979B00">

<?php

$ano = $_POST['btnAno'];

$producto = $_POST['btnProducto'];

$especie = $_POST['btnEspecie'];

$pais = $_POST['btnPais'];

$sumavol = $_POST['btnSumavol'];

$sumafob = $_POST['btnSumafob'];

?>



<table border="0" width="69%" height="73">

<tr>

<td width="630">

<p align="center"><font face="Verdana" size="2"><a href="../index.htm"

target="_top"><img border="0" src="../images/pie-estadisticas_bn.jpg" width="630"

height="92"></a></font></p>

</td>

</tr>

</table>

<table border="0" width="70%" height="20">

<tr>


</tr>

<tr align="center">

<td valign="middle">

<p><b><font face="Arial" color="#C26426" size="1"> </font></b><a

href="javascript:history.back();"><img src="../images/volver.gif" alt="Volver"

border="0" align="bottom" width="53" height="15"></a></p>

</td>

</tr>

</table>

<p>

<p align="center"><font face="Verdana" size="3"><b>Detalle de exportaciones para

el año <?php echo $ano; ?></b></font>

<p>

<table border="0" width="74%" cellspacing="0" cellpadding="0">

<tr>

<td width="41%">

<font face="Verdana" size="2"><b>Producto:</b></font>

</td>

<td width="59%"> <?php echo $producto; ?></td>

</tr>

<tr>

<td width="41%">

<font face="Verdana" size="2"><b>Especie:</b></font>

</td>

<td width="59%"> <?php echo $especie; ?></td>

</tr>

<tr>

<td width="41%">

<font face="Verdana" size="2"><b>País de destino:</b></font>

</td>

<td width="59%"> <?php echo $pais; ?></td>

</tr>

</table>

<table border="1" width=590 bordercolor="#000000" cellspacing="0"

cellpadding="0">

<tr>

<td width="42" bgcolor="#FFFFFF"><font face="Arial"

size="2"><b><Center>Año</Center></b></font></td>


size="2"><b><Center>Producto</Center></b></font></td>


size="2"><b><Center>Especie</Center></b></font></td>


size="2"><b><Center>Pais</Center></b></font></td>


size="2"><b><Center>Volumen



(Toneladas)</Center></b></font></td>

<td width="86" bgcolor="#FFFFFF"><font face="Arial" size="2"><b><Center>FOB

(US$)</Center></b></font></td>

</tr>

<?php

include("conexion.php");

$query = "SELECT producto,especie,pais,volumen,fob FROM nomaderero WHERE

ano = '$ano'";


$query = $query." AND producto = '$producto' ";

if($especie != 'TODOS'){

$query = $query." AND especie = '$especie' ";

}

if($pais != 'TODOS'){

$query = $query." AND pais = '$pais' ";

}

$result = mysql_query ( $query,$link );

$num_res = mysql_num_rows ( $result );

if($num_res == 0)

echo "No se encontraron resultados";

while($var=mysql_fetch_array($result)) {

$volumen = $var['volumen'];

$fob = $var['fob'];

$productoAno = $var['producto'];

$especieAno = $var['especie'];

$paisAno = $var['pais'];

?>

<tr>

<td width="42"><font face="Verdana" size="1"></font> <?php echo $ano;

?></td>

<td width="142"><font face="Verdana" size="1"></font> <?php echo

$productoAno; ?></td>

<td width="116"><font face="Verdana" size="1"></font> <?php echo

$especieAno; ?></td>

<td width="104"><font face="Verdana" size="1"></font><?php echo $paisAno;

?></td>

<td width="86" align="right"><b><font face="Verdana"

size="1"></font></b> <?php echo number_format($volumen, 2, ",", ".");

?></td>


size="1"></font></b> $<?php echo number_format($fob, 2, ",", "."); ?></td>

</tr>

<?php

}

mysql_close($link);



?>

<tr>

<td width="42"><font face="Verdana" size="1"></font> </td>

<td width="142"><font face="Verdana" size="1"></font> </td>

<td width="116"><font face="Verdana" size="1"></font>&nbsp</td>

<td width="104"><b><center><font face="Verdana" size="1"></font>TOTALES:

</center></b></td>


size="1"></font></b> <?php echo number_format($sumavol, 2, ",", ".");

?></td>


size="1"></font></b> $<?php echo number_format($sumafob, 2, ",", ".");

?></td>

</tr>

</table>

<p> </p>

<table border="0" width="67%">

<tr>

<td width="100%">

<p align="center"><b><font face="Arial" color="#C26426"

size="1"> </font></b><a href="javascript:history.back();"><img

src="../images/volver.gif" alt="Volver" border="0" align="bottom" width="53"

height="15"></a></p>

</td>

</tr>

<tr>

<td width="100%">

<hr size="5" color="#A9A520">

</td>

</tr>

<tr>

<td width="100%" style="letter-spacing: 2pt">

<p><font face="Verdana" size="2"><a href="../index.htm" target="_top"><img


height="92"></a></font></td>

</tr>

</table>

</body>

<footer>

</footer>

</html>

informe final proyecto de plataforma web

Documents