Universidad Abierta Interamericana

Modelo Computacionales - MCGA

Trabajo practico Modelo Computacionales

Desarrollo de una aplicacin web siguiendo el patrn MVC
Vamos a construir una aplicacin web para elaborar y consultar un repositorio de alimentos con
datos acerca de sus propiedades dietticas. Utilizaremos una base de datos para almacenar dichos
datos que consistir en una sola tabla con la siguiente informacin sobre alimentos:

El nombre del alimento,

La energa en kilocaloras,
La cantidad de protenas,
La cantidad hidratos de carbono en gramos
La cantidad de fibra en gramos y
La cantidad de grasa en gramos,
Todo ello por cada 100 gramos de alimento.

Aunque se trata de una aplicacin muy sencilla, cuenta con los elementos suficientes para trabajar
el aspecto que realmente pretendemos estudiar en esta unidad: la organizacin del cdigo
siguiendo las directrices del patrn MVC. Comprobaremos como esta estrategia nos ayuda a mejorar
las posibilidades de crecimiento (escalabilidad) y el mantenimiento de las aplicaciones que
desarrollamos.
URLS
URL
http://servidor/alimentos/Index
http://servidor/alimentos/Listar
http://servidor/alimentos/Create
http://servidor/alimentos/buscar
http://servidor/alimentos/Ver/id

Accin
Mostrar pantalla inicio
Listar alimentos
Insertar un alimento
Buscar alimentos
Ver el alimento x

NOTA
Aplique los conceptos de arquitectura vistos en campo y diploma, adems de las nociones de
accesibilidad y usabilidad advertidos en clases anteriores.

Parte 2 - Extendido
Ejercicio 1.
Aade al men una opcin para mostrar un listado con todos los alimentos con enlaces a los
artculos correspondientes de la Wikipedia y construye dicha funcionalidad.
Consejo Los artculos de la Wikipedia presentan la siguiente URL:
http://es.wikipedia.org/wiki/{trmino}, teniendo en cuenta tildes, de manera que el artculo
correspondiente a la fruta meln ser: http://es.wikipedia.org/wiki/ meln, puedes construir una
tabla con dos columnas, en la primera muestras el nombre del alimento y en la segunda el enlace a
la Wikipedia.
Ejercicio 2
Enriquece los enlaces del ejercicio anterior con ventanas modales.
Consejo Las interfaces HTML de las aplicaciones web pueden enriquecerse gracias al uso de
JavaScript en la parte del cliente. En este ejercicio se propone que convierta los enlaces del ejercicio
anterior de manera que cuando haga clic en ellos el vnculo aparezca en una ventana situada encima
de la pgina que muestra los enlaces, es decir, en una ventana modal. Esto se consigue utilizando
JavaScript. Vamos a proyectar una posible solucin que te ayude a realizar el ejercicio:
Descarga las siguientes libreras JavaScript:
Jquery,
colorbox, http://colorpowered.com/colorbox/colorbox.zip
El siguiente cdigo convierte todos los enlaces cuya clase (atributo class del elemento HTML) sea
winmodal:
<script>
$(document).ready(function(){
$(". winmodal ").colorbox();
});
</script>
Para que dicho ejemplo funcione, el documento HTML debe incluir las libreras de Jquery y
colorbox.js (en ese orden). Adems, si quieres ver bien la ventana modal, debes incluir la hoja de
estilo colorbox.css que viene tambin en el archivo colorbox.zip. Si quieres ms ayuda mira el cdigo
HTML de esta direccin:
http://colorpowered.com/colorbox/core/example1/index.html
Tu tarea consiste en ubicar en los lugares que correspondan las libreras y el cdigo anterior para
que los enlaces a los artculos de la Wikipedia del ejercicio anterior se vean en una ventana modal.

Ejercicio 3
Agrega al listado de alimentos del ejercicio 1 una columna ms donde ubicars un enlace que
proporcione un archivo Excel con los datos del alimento.
Consejo Un posible formato para el archivo Excel que esta funcionalidad debe entregar como
respuesta puede ser (Los datos dietticos No son reales):
Nombre= Meln
Energa=100
protenas=150
hc=45
fibra=24
grasa= 10